xmlHttpRequest

Question

के माध्यम से एक फ़ाइल को मल्टीपार्ट के रूप में भेजें, क्या मैं एक फ़ाइल को XMLHttpRequest द्वारा सर्वलेट के रूप में एक फ़ाइल भेज सकता हूं? मैं एक फॉर्म बना रहा हूं और इसे मल्टीपार्ट के रूप में सबमिट कर रहा हूं, लेकिन किसी भी तरह से इसे सफलतापूर्वक अपलोड करने के लिए मुझे कोई प्रतिक्रिया नहीं मिल रही है। मैं नहीं चाहता कि पेज को रीफ्रेश किया जाए, इसलिए इसे अजाक्स द्वारा किया जाना है।

Answer 1

एक्सएचआर FormData API (जिसे पहले "एक्सएचआर 2" या "एक्सएचआर लेवल 2" के हिस्से के रूप में जाना जाता है, जिसे वर्तमान में "एक्सएचआर उन्नत सुविधाओं" के नाम से जाना जाता है) के साथ ही संभव है।

इस HTML को देखते हुए,

<input type="file" id="myFileField" name="myFile" /> 

आप इसे नीचे के रूप में अपलोड कर सकते हैं:

var formData = new FormData(); 
formData.append("myFile", document.getElementById("myFileField").files[0]); 

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "myServletUrl"); 
xhr.send(formData); 

एक्सएचआर उचित हेडर और अनुरोध शरीर एन्कोडिंग और फ़ाइल इस उदाहरण में में उपलब्ध हो जाएगा के बारे में ध्यान रखना होगा नाम के साथ सर्वर पक्ष myFile नाम के साथ भाग।

आपको यह ध्यान रखना होगा कि FormData API पुराने ब्राउज़र में समर्थित नहीं है। caniuse.com पर आप देख सकते हैं कि वर्तमान में यह क्रोम 7+, फ़ायरफ़ॉक्स 3.5+, सफारी 5+, आईई 10+ और ओपेरा 12+ में लागू है।

jQuery Form plugin का उपयोग करने का एक विकल्प है।

$("#formId").ajaxForm(function(response) { 
    // Handle ajax response here. 
}); 

यह भी एक छिपा iframe चाल द्वारा और साथ फ़ाइल अपलोड का समर्थन करता है: अपने पूरे फार्म, जब लिखा और JavaScript कोड का किसी भी लाइन के बिना ठीक से कार्य है, तो तुरन्त सिर्फ निम्न पंक्ति के साथ ajaxified कर दिया जाएगा। गहराई से स्पष्टीकरण के लिए this jQuery Form documentation भी देखें। आपको केवल सामान्य (सिंक्रोनस) और AJAX (एसिंक्रोनस) अनुरोधों को रोकने में सक्षम होने के लिए सर्वलेट कोड को बदलने की आवश्यकता हो सकती है। एक ठोस उदाहरण के लिए भी इस सवाल का जवाब देखें: Simple calculator with JSP/Servlet and Ajax

किसी भी तरह से, अपलोड की गई फ़ाइल तो इस प्रकार एक @MultipartConfig सर्वलेट की doPost() विधि में उपलब्ध होना चाहिए:

Part myFile = request.getPart("myFile"); 

या आप सर्वलेट पर अभी भी कर रहे हैं 2.5 या पुराने, अपाचे कॉमन्स फ़ाइल का उपयोग सामान्य तरीके से अपलोड करें। एक ठोस उदाहरण के लिए यह उत्तर भी देखें: How to upload files to server using JSP/Servlet?

Answer 2

यह XHR साथ multipart/form-data भेजने के लिए संभव नहीं है (अद्यतन:। हालांकि यह आधुनिक ब्राउज़रों में संभव है, XHR2 साथ BalusC के जवाब देखें)।

इसे प्राप्त करने का एक आम तरीका नियमित form का उपयोग करना है, लेकिन इसके बजाय iframe में उपयोग करना है। इस तरह, केवल iframe अपलोड पर रीफ्रेश किया गया है।