জাভাস্ক্রিপ্ট: ফাইল আপলোড করুন

Question

আসুন আমি পৃষ্ঠাতে এই উপাদানটি রয়েছে বলে থাকি:

<input id="image-file" type="file" />

এটি এমন একটি বোতাম তৈরি করবে যা ওয়েব পৃষ্ঠার ব্যবহারকারীদের ব্রাউজারে একটি OS "ফাইল ওপেন ..." ডায়ালগের মাধ্যমে একটি ফাইল নির্বাচন করতে দেয়।

আসুন বলি যে ব্যবহারকারী ক্লিক বোতাম বোতামটি বলে, ডায়ালগটিতে একটি ফাইল নির্বাচন করে, তারপরে ডায়ালগটি বন্ধ করতে "ওকে" বোতামটি ক্লিক করে।

নির্বাচিত ফাইলের নাম এখন এতে সংরক্ষণ করা হয়েছে:

document.getElementById("image-file").value

এখন, ধরা যাক যে সার্ভারটি ইউআরএল "/ আপলোড / চিত্র" এ মাল্টি-পার্ট পোষ্টগুলি পরিচালনা করে।

আমি কীভাবে ফাইলটিকে "/ আপলোড / চিত্র" এ প্রেরণ করব?

এছাড়াও, ফাইলটি আপলোড করা শেষ হয়েছে এমন বিজ্ঞপ্তিটি আমি কীভাবে শুনব?

Comments

জাভাস্ক্রিপ্ট আপলোডগুলি পরিচালনা করছে না, কারণ এটি সার্ভারসাইড। সার্ভার সাইড স্ক্রিপ্টটি ফাইলটি গ্রহণ করবে এবং তারপরে এটি সরানো হবে। অস্থায়ী ফোল্ডার থেকে কাঙ্ক্ষিত ফোল্ডারে পিএইচপি করার জন্য।

— বকুদন

আমি এখানে পিএইচপি ব্যবহার করে একটি দুর্দান্ত সমাধান পেয়েছি

— mld

পুনরায় খোলার পক্ষে ভোট দিয়েছেন কারণ প্রশ্নটি পজিজএস (প্লেইন পুরাতন জাভাস্ক্রিপ্ট) সম্পর্কিত নয় jQuery।

— e2-e4

Answer 1

যতক্ষণ না আপনি AJAX ব্যবহার ফাইল আপলোড করার চেষ্টা করছেন, শুধু ফর্ম জমা করতে /upload/image।

<form enctype="multipart/form-data" action="/upload/image" method="post">
    <input id="image-file" type="file" />
</form>

আপনি যদি চিত্রটি পটভূমিতে আপলোড করতে চান (যেমন পুরো ফর্মটি জমা না দিয়ে), আপনি এজ্যাক্স ব্যবহার করতে পারেন:

• জেএসপি এবং জাভাস্ক্রিপ্ট ব্যবহার করে অ্যাসিঙ্ক্রোনাস ফাইল আপলোড (এজেএক্স ফাইল আপলোড)
• jQuery Ajax ফাইল আপলোড
• ফাইল আপলোড ব্যবহার করে অ্যাজাক্স

Comments

অথবা ইফ্রেমে 0x0 আকারের চিত্রটি আপলোডার স্ক্রিপ্টের সাথে তার এসসিআর = "" এর মধ্যে রেখে ফর্মটি পোস্ট করুন টার্গেট = "iframeId" ব্যবহার করে ফলাফলটি আবার পড়তে iframe src। লোড ইভেন্ট যা উদাহরণস্বরূপ jQuery ব্যবহার করে আবদ্ধ হতে পারে reading

— দিমিত্রি

আজকাল জাভাস্ক্রিপ্ট এবং আজাক্সের মাধ্যমে আপভোট করা সম্ভব, দেখুন: স্ট্যাকওভারফ্লো.com/a/10811427 / 694469 (আমি ডাউন করিনি)।

— কাজম্যাগনাস

@ কাজম্যাগনুস, আপনি সম্ভবত 'আপলোড' বলতে চাইছিলেন তবে দুর্ঘটনাক্রমে 'আপভোট' বলেছেন

— স্যামুয়েল অ্যালান

Answer 2

খাঁটি জেএস

আপনি অপেক্ষা করুন-চেষ্টা-ক্যাচ দিয়ে বিকল্পভাবে আনতে ব্যবহার করতে পারেন

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

async function SavePhoto(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Before selecting the file open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

<br><br>
(in stack overflow snippets there is problem with error handling, however in <a href="https://jsfiddle.net/Lamik/b8ed5x3y/5/">jsfiddle version</a> for 404 errors 4xx/5xx are <a href="https://stackoverflow.com/a/33355142/860099">not throwing</a> at all but we can read response status which contains code)

পুরাতন স্কুল পদ্ধতির - এক্সএইচআর

let photo = document.getElementById("image-file").files[0];  // file from input
let req = new XMLHttpRequest();
let formData = new FormData();

formData.append("photo", photo);                                
req.open("POST", '/upload/image');
req.send(formData);

function SavePhoto(e) 
{
    let user = { name:'john', age:34 };
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    let photo = e.files[0];      
    
    formData.append("user", JSON.stringify(user));   
    formData.append("photo", photo);
    
    xhr.onreadystatechange = state => { console.log(xhr.status); } // err handling
    xhr.open("POST", '/upload/image');    
    xhr.send(formData);
}

<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Choose file and open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

<br><br>
(the stack overflow snippets, has some problem with error handling - the xhr.status is zero (instead of 404) which is similar to situation when we run script from file on <a href="https://stackoverflow.com/a/10173639/860099">local disc</a> - so I provide also js fiddle version which shows proper http error code <a href="https://jsfiddle.net/Lamik/k6jtq3uh/2/">here</a>)

সারসংক্ষেপ

• সার্ভার সাইডে আপনি মূল ফাইলের নাম (এবং অন্যান্য তথ্য) পড়তে পারেন যা ব্রাউজারে অনুরোধ করার জন্য স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত filename ফর্মডাটা প্যারামিটারে ।
• আপনাকে অনুরোধ শিরোনাম সেট করার দরকার নেই Content-Type করতে multipart/form-data- এই স্বয়ংক্রিয়ভাবে ব্রাউজার দ্বারা সেট করা হবে।
• পরিবর্তে /upload/image আপনি পুরো ঠিকানা ব্যবহার করতে পারেন http://.../upload/image।
• আপনি যদি একক অনুরোধে অনেকগুলি ফাইল প্রেরণ করতে চান তবে multipleঅ্যাট্রিবিউটটি ব্যবহার করুন : <input multiple type=... />এবং নির্বাচিত সমস্ত ফাইলকে একইভাবে ফর্মডাটাতে সংযুক্ত করুন (উদাঃphoto2=...files[2]; ... formData.append("photo2", photo2);)
• উদাহরণস্বরূপ আপনি অতিরিক্ত ডেটা (জেসন) অন্তর্ভুক্ত করতে পারেন let user = {name:'john', age:34} :formData.append("user", JSON.stringify(user));
• এই সমাধানগুলি সমস্ত বড় ব্রাউজারে কাজ করা উচিত।

Comments

আমার জন্য নিখুঁতভাবে কাজ করুন।

— ট্রিইউ এনগুইন

formData === ফর্ম জমা দিনenctype="multipart/form-data"

— xgqfrms

আমি ত্রুটি net::ERR_ABORTED 405 (Method Not Allowed)

— পাচ্ছি

@ হিদ্রতাহমান এই সার্ভারটি সাধারণত প্রদর্শিত হয় যখন সার্ভার আপনার ইউআরএলটির জন্য পোষ্ট পদ্ধতি প্রয়োগ না করে

— কামিল কিয়েসজেউস্কি

অদ্ভুত - আপনার শিরোনাম অনুযায়ী আমি ভাবছিলাম যে আমাদের আর সার্ভারের প্রয়োজন নেই: ডি

— হিদিত রহমান