XMLHttpRequest POST मल्टीपार्ट/फॉर्म-डेटा

Question

मैं जावास्क्रिप्ट में XMLHttpRequest का उपयोग ऐसे फॉर्म को पोस्ट करने के लिए करना चाहता हूं जिसमें फ़ाइल प्रकार इनपुट तत्व शामिल है ताकि मैं पेज रीफ्रेश से बच सकूं और उपयोगी XML वापस प्राप्त कर सकूं।

मैं एमएसआईई के लिए आईफ्रेम या मोज़िला के लिए ऑब्जेक्ट में फॉर्म पर लक्षित विशेषता सेट करने के लिए जावास्क्रिप्ट का उपयोग करके पेज रीफ्रेश किए बिना फॉर्म सबमिट कर सकता हूं, लेकिन इसमें दो समस्याएं हैं। मामूली समस्या यह है कि लक्ष्य W3C अनुपालन नहीं है (यही कारण है कि मैंने इसे जावास्क्रिप्ट में सेट किया है, एक्सएचटीएमएल में नहीं)। बड़ी समस्या यह है कि ओएस एक्स तेंदुए पर कम से कम मोज़िला पर ऑनलोड इवेंट नहीं होता है। इसके अलावा, XMLHttpRequest सुंदर प्रतिक्रिया कोड के लिए बना देगा क्योंकि लौटाया गया डेटा एक्सएमएल हो सकता है, एक्सएचटीएमएल तक सीमित नहीं है जैसा कि आईफ्रेम के मामले में है।

Content-Type: multipart/form-data;boundary=<boundary string> 
Content-Length: <length> 
--<boundary string> 
Content-Disposition: form-data, name="<input element name>" 

<input element value> 
--<boundary string> 
Content-Disposition: form-data, name=<input element name>"; filename="<input element value>" 
Content-Type: application/octet-stream 

<element body> 

मैं ऊपर HTTP धारा नकल करने XMLHttpRequest ऑब्जेक्ट के भेजने विधि कैसे मिलता है:

HTTP कि तरह लग रहा है में प्रपत्र परिणाम भेजने से?

Answer 1

आप बहुखण्डीय/फार्म-डेटा के अनुरोध अपने आप को (http://www.faqs.org/rfcs/rfc2388.html पर इसके बारे में अधिक पढ़ सकते हैं) और फिर send विधि (यानी। XHR का उपयोग निर्माण कर सकते हैं करने के लिए ऑनलोड घटना संलग्न करने के लिए। भेजने के लिए (अपने-बहुखण्डीय फार्म-डेटा))। इसी प्रकार, लेकिन फ़ायरफ़ॉक्स 4+ (क्रोम 5+ और सफारी 5+ में) में, आप FormData इंटरफ़ेस का उपयोग कर सकते हैं जो ऐसे अनुरोधों को बनाने में मदद करता है। send विधि टेक्स्ट सामग्री के लिए अच्छी है लेकिन यदि आप छवियों जैसे बाइनरी डेटा भेजना चाहते हैं, तो आप इसे sendAsBinary विधि की सहायता से कर सकते हैं जो फ़ायरफ़ॉक्स 3.0 से शुरू हो रहा है। XMLHttpRequest के माध्यम से फ़ाइलों को भेजने के तरीके के विवरण के लिए, कृपया http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html देखें।

Answer 2

मुझे नहीं लगता कि क्यों iframe (अदृश्य एक) एक्सएचटीएमएल का तात्पर्य है और कोई भी सामग्री नहीं। यदि आप एक आईफ्रेम का उपयोग करते हैं तो आप पहले से हीस्टेन्चेंज ईवेंट सेट कर सकते हैं और 'पूर्ण' की प्रतीक्षा कर सकते हैं। इसके बाद आप स्ट्रिंग परिणाम प्राप्त करने के लिए frame.window.document.innerHTML (कृपया कोई मुझे सही करें) का उपयोग कर सकते हैं।

var lFrame = document.getElementById('myframe'); 
lFrame.onreadystatechange = function() 
{ 
    if (lFrame.readyState == 'complete') 
    { 
     // your frame is done, get the content... 
    } 
}; 

Answer 3

वहाँ जावास्क्रिप्ट के अंदर एक फ़ाइल इनपुट क्षेत्र तक पहुँचने के लिए तो वहाँ एक जावास्क्रिप्ट केवल ajax फ़ाइल अपलोड करने के लिए समाधान नहीं है किसी भी तरह से नहीं है।

using an iframe जैसे कामकाज हैं।

अन्य विकल्प की तरह SWFUpload या Google Gears

Answer 4

आप बस जहां IFrame आईडी का उल्लेख, अपने फार्म के लिए एक लक्ष्य विशेषता जोड़ने के लिए, एक IFrame पर पोस्ट करने के इस काम करने के लिए प्राप्त करने के लिए की आवश्यकता होगी कुछ का उपयोग करने के लिए होगा। कुछ इस तरह:

 

<form method="post" target="myiframe" action="handler.php"> 
... 
</form> 
<iframe id="myiframe" style="display:none" /> 
 

Answer 5

मैं हूँ आपके द्वारा निर्दिष्ट ऑनलोड घटना के बारे में भ्रमित, यह पृष्ठ पर या iframe पर है ?, पहले जवाब सही थेरेस कोई रास्ता नहीं है, तो क्या यह विशुद्ध रूप से उपयोग कर रहा XMLHttpRequest, क्या करना है एक बार आईफ्रेम पर प्रतिक्रिया मौजूद होने के बाद आप कुछ तरीकों को ट्रिगर करना चाहते हैं, बस जांचें कि क्या इसमें पहले से ही सामग्री है या डीओएम स्क्रिप्टिंग का उपयोग नहीं कर रहा है, फिर विधि को फायर करें।

आइफ्रेम

if(window.attachEvent){ 
document.getElementById(iframe).attachEvent('onload', some_method); 
}else{ 
document.getElementById(iframe).addEventListener('load', some_method, false); 
} 

Answer 6

सामग्री-विन्यास: फार्म डेटा, नाम

आप अर्धविराम का उपयोग करना चाहिए, इस तरह: सामग्री-विन्यास: फार्म डेटा; नाम

Answer 7

यहाँ है एक तारीख रास्ता FormData (full doc @MDN)

का उपयोग कर अप करने के लिए स्क्रिप्ट

:

var form = document.querySelector('#myForm'); 
form.addEventListener("submit", function(e) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", this.action); 
    xhr.addEventListener("load", function(e) { 
     // Your callback 
    }); 

    xhr.send(new FormData(this)); 

    e.preventDefault(); 
}); 

(यह बुनियादी रूप से)

<form id="myForm" action="..." method="POST" enctype="multipart/form-data"> 
    <input type="file" name="file0"> 
    <input type="text" name="some-text"> 
    ... 
</form> 

धन्यवाद फिर से एलेक्स पोलो के लिए उसकी उत्तर