एचटीएमएल 5 फाइल एपीआई पढ़ाएएसबीनरीस्ट्रिंग डिस्क

Question

पर फाइलों की तुलना में फाइलों की तुलना में काफी बड़ी फ़ाइलों को पढ़ता है https://gist.github.com/992562 पर पूर्ण कोड।

मैं HTML फ़ाइल एपीआई का उपयोग कर रहा हूं और एक्सएचआर पोस्ट के माध्यम से एक PHP स्क्रिप्ट पर फ़ाइलों को अपलोड करने के लिए ड्रैग/ड्रॉप कर रहा हूं। प्रक्रियात्मक रूप से, सब कुछ ठीक काम कर रहा प्रतीत होता है, हालांकि जब मैं अपलोड की गई फ़ाइलों को खोलने का प्रयास करता हूं, तो कोई भी गैर-पाठ फ़ाइल स्रोत फ़ाइल से बहुत बड़ी होती है, और नहीं खुलती है। यह स्पष्ट रूप से वही डेटा नहीं है जैसा कि स्रोत डिस्क पर था। हालांकि, टेक्स्ट फाइलें बिल्कुल वही हैं और ठीक है।

एक 3 फ़ाइल खींचें पर कुछ उदाहरण/ड्रॉप अपलोड: फ़ाइल 1: पाठ/एक्सएमएल: image/पीएनजी: पर डिस्क 14 KB, अपलोड की गई 18 पर डिस्क 13 KB, अपलोड की गई 13 KB, पूरी तरह से फ़ाइल 2 काम करता है केबी, फ़ाइल 3: एप्लिकेशन/एक्सएलएसएक्स नहीं होगा: डिस्क 12 केबी पर, 14 केबी अपलोड किया गया,

यह सब नीचे उबलता है (xhr शीर्षलेख सेटअप होने के बाद, फ़ाइल ऑब्जेक्ट तैयार है, आदि)):

var reader = new FileReader(); 
    reader.onload = function(evt) { 
    xhr.send(evt.target.result) 
    } 
    reader.readAsBinaryString(f); 

बड़े, खराब डेटा को वापस कर रहा है। क्या इसमें कुछ भी स्पष्ट रूप से गलत है?

Answer 1

शायद यह इसलिए है क्योंकि आप फ़ाइल को बाइनरी स्ट्रिंग के रूप में पढ़ रहे हैं और मैन्युअल रूप से multipart/form-data अनुरोध का निर्माण कर रहे हैं। एक के लिए, आपको FileReader का उपयोग करने की आवश्यकता नहीं है। चूंकि आप केवल सामग्री भेजना चाहते हैं, xhr.send(File) या xhr.send(FormData) का उपयोग करने का प्रयास करें। उत्तरार्द्ध आपके लिए multipart/form-data बनाता है और

function uploadFiles(url, files) { 
    var formData = new FormData(); 

    for (var i = 0, file; file = files[i]; ++i) { 
    formData.append(file.name, file); 
    } 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', url, true); 
    xhr.onload = function(e) { ... }; 

    xhr.send(formData); // multipart/form-data 
} 

document.querySelector('input[type="file"]').onchange = function(e) { 
    uploadFiles('/server', this.files); 
};