जावास्क्रिप्ट: फ़ाइल अपलोड करें

Question

मान लें कि मेरे पास पृष्ठ पर यह तत्व है:

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

यह एक बटन बनाएगा जो वेब पेज के उपयोगकर्ताओं को ब्राउज़र में ओएस "फ़ाइल ओपन ..." संवाद के माध्यम से एक फ़ाइल का चयन करने की अनुमति देता है।

मान लीजिए कि उपयोगकर्ता ने कहा बटन पर क्लिक किया है, संवाद में एक फ़ाइल का चयन करता है, फिर संवाद को बंद करने के लिए "ओके" बटन पर क्लिक करता है।

चयनित फ़ाइल नाम अब इसमें संग्रहीत किया गया है:

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

अब, मान लें कि सर्वर URL "/ अपलोड / छवि" पर बहु-भाग POST को संभालता है।

मैं फ़ाइल को "/ अपलोड / छवि" कैसे भेजूं?

इसके अलावा, मैं अधिसूचना के लिए कैसे सुनूं कि फ़ाइल अपलोड करना समाप्त हो गई है?

Comments

जावास्क्रिप्ट अपलोड अपलोड नहीं कर रहा है, क्योंकि यह सर्वरसाइड है। सर्वर साइड स्क्रिप्ट फ़ाइल को प्राप्त करेगा, और फिर इसे स्थानांतरित करेगा। अस्थायी फ़ोल्डर से वांछित फ़ोल्डर के लिए php के लिए।

— बाकुदन

मुझे PHP का उपयोग करके एक अच्छा समाधान मिला

— mld

फिर से खोलने की कोशिश की क्योंकि सवाल POJS (सादा पुरानी जावास्क्रिप्ट) के बारे में है न कि 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>

यदि आप बैकग्राउंड में इमेज अपलोड करना चाहते हैं (जैसे बिना पूरा फॉर्म सबमिट किए), तो आप ajax का उपयोग कर सकते हैं:

• एसिंक्रोनस फ़ाइल अपलोड (AJAX फ़ाइल अपलोड) jsp और जावास्क्रिप्ट का उपयोग कर
• jQuery के अजाक्स फ़ाइल अपलोड
• फ़ाइल अपलोड का उपयोग करते हुए अजाक्स

Comments

या उसके src = "" के अंदर छवि अपलोडर स्क्रिप्ट के साथ 0x0 आकार या iframe को src .लोड घटना पर वापस परिणाम पढ़ने के लिए लक्ष्य = "iframeId" का उपयोग करके फॉर्म को पोस्ट करें जो उदाहरण के लिए jQuery का उपयोग करके बाध्य किया जा सकता है।

— दिमित्री

यह आजकल जावास्क्रिप्ट और अजाक्स के माध्यम से अपवोट करना संभव है, देखें: stackoverflow.com/a/10811427/694469 (मैंने डाउनवोट नहीं किया)।

— काजग्नस

@KajMagnus, आप शायद 'अपलोड' का मतलब है, लेकिन गलती से 'upvote' कहा गया

— शमूएल एलन

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)

पुराने स्कूल का दृष्टिकोण - xhr

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=... />समान तरीके से formData के सभी चुने हुए फ़ाइलें, और देते हैं (उदाहरण के लिए photo2=...files[2];... formData.append("photo2", photo2);)
• आप let user = {name:'john', age:34}इस तरह से अनुरोध करने के लिए अतिरिक्त डेटा (json) शामिल कर सकते हैं :formData.append("user", JSON.stringify(user));
• यह समाधान सभी प्रमुख ब्राउज़रों पर काम करना चाहिए।

Comments

मेरे लिए पूरी तरह से काम करें।

— त्रियुगी गुयेन

formData === फॉर्म सबमिटenctype="multipart/form-data"

— xgqfrms

मुझे त्रुटि मिल रही हैnet::ERR_ABORTED 405 (Method Not Allowed)

— हिदायत रहमान

@ ह्दयत्रहमान आमतौर पर यह तब प्रकट होता है जब

— सेवर

अजीब - आपकी हेडिंग के अनुसार मैं सोच रहा था कि हमें सर्वर की आवश्यकता नहीं है: D

— हिदायत रहमान