HTML5 फ़ाइल अपलोड सुविधाएँ

कुछ अनुभव के बाद, मैंने HTML5 सुविधाओं, अर्थात् फ़ाइल एपीआई का उपयोग करके फ़ाइलों को डाउनलोड करने के बारे में एक छोटा धोखा पत्र लेख लिखने का फैसला किया।

पर पढ़ें:

1. ब्राउज़र का समर्थन।
2. फॉर्म डेटा के माध्यम से डाउनलोड करें।
3. फ़ाइल रीडर के माध्यम से डाउनलोड करें।

1. ब्राउज़र का समर्थन

बेशक, सभी ब्राउज़र वर्तमान में इस सुविधा का पूरी तरह से समर्थन नहीं करते हैं। हम IE के बारे में सुरक्षित रूप से भूल जाते हैं, क्योंकि यह केवल संस्करण 10 में फ़ाइल एपीआई का समर्थन करेगा। बाकी के साथ, अधिक उन्नत ब्राउज़र, और ये सिर्फ क्रोम, फ़ायरफ़ॉक्स, ओपेरा और सफारी हैं, सब कुछ इतना आसान नहीं है। बेशक, वे "आगे" होने की कोशिश करते हैं, लेकिन अभी तक हर कोई सफल नहीं होता है।

HTML 5 में, सर्वर पर फ़ाइल को अतुल्यकालिक रूप से पढ़ने और भेजने के 2 तरीके हैं: फ़ाइल रीडर और फॉर्म डेटा ऑब्जेक्ट के माध्यम से। सिद्धांत रूप में, यह उन फ़ाइलों को अपलोड करने के लिए है जो सर्वर पर फ़ाइलों को भेजने के लिए किस तरह से कोई फर्क नहीं पड़ता है। सटीक होने के लिए, XMLHttpRequest ऑब्जेक्ट फ़ाइलों को भेजने के लिए ज़िम्मेदार है, और फ़ाइल रीडर और फॉर्म डेटा केवल आपको फ़ाइल को पढ़ने और उसके एक्सएचआर को "फीड" करने की अनुमति देता है। इन वस्तुओं को विभिन्न कार्यों के लिए डिज़ाइन किया गया है। फाइल रीडर ब्राउजर साइड की फाइलों के साथ काम करने के लिए बनाया गया है। अर्थात्, फ़ाइल को सर्वर पर अपलोड करने से पहले ही, आप इसके मापदंडों का पता लगा सकते हैं, जैसे कि वजन, प्रकार, निर्माण की तारीख आदि। उदाहरण के लिए, चित्र को तुरंत उपयोगकर्ता को सर्वर पर डाउनलोड किए बिना दिखाया जा सकता है। प्रपत्र डेटा को सर्वर पर अपलोड करने से पहले प्रपत्र बनाने और प्रपत्र डेटा प्रबंधित करने के लिए डिज़ाइन किया गया है। और जैसा कि हम जानते हैं, इनपुट प्रकार = "फ़ाइल" भी रूपों में मौजूद है, जिसके माध्यम से इस क्षण तक हमने फाइलें भेजी थीं। इस प्रकार, आप एक फॉर्म बना सकते हैं, इसके लिए एक फ़ाइल संलग्न कर सकते हैं और इसे एक्सएचआर के माध्यम से सर्वर पर भेज सकते हैं।

गाने के बोल से लेकर एक्शन तक। दोनों बूट उदाहरणों पर विचार करें। लेकिन पहले, एक छोटा नोट जो फ़ाइल एपीआई के माध्यम से लोड करने के लिए ब्राउज़र की क्षमता का निर्धारण करना अच्छा होगा। ऐसा करने के लिए, बस फ़ाइल रीडर या फॉर्म डेटा ऑब्जेक्ट के अस्तित्व की जांच करें। लेकिन! सफारी ने अभी भी फाइल रीडर के लिए समर्थन नहीं किया है और आप इस ऑब्जेक्ट के साथ काम नहीं कर पाएंगे। Yablofagi अशिष्ट हैं, और हम सभी उपयोगकर्ताओं को समान रूप से प्यार करते हैं। इसलिए, इस समय, फॉर्म डेटा की उपस्थिति को सबसे सही जांच माना जाएगा:

if (window.FormData === undefined) { //   ,    :-)    . } 

2. फॉर्म डेटा के माध्यम से डाउनलोड करें

सबसे पहले, हम सभी घटनाओं का वर्णन करते हैं: फ़ाइलों को खींचते हुए, उन्हें डाउनलोड करने के लिए एक ब्लॉक में "फेंक", आदि।

 $("#drop-block").bind( // #drop-block        'dragenter', function(e) { //        . }) .bind( 'dragover', function(e) { //        . }).bind( 'dragleave', function(e) { //         . }).bind( 'drop', function(e) { //   «»   . if (e.originalEvent.dataTransfer.files.length) { //    -   . e.preventDefault(); e.stopPropagation(); // e.originalEvent.dataTransfer.files —     . // e.originalEvent.dataTransfer.files[i].size —     . // e.originalEvent.dataTransfer.files[i].name —   . //    :-) upload(e.originalEvent.dataTransfer.files); //   . } }); 

ठीक है, चलो सीधे पढ़ें और फ़ाइलें डाउनलोड करें:

 function upload(files) { //       . //    ,   Safari   //  . $.get('/blank.html'); var http = new XMLHttpRequest(); //   XHR,       . //   if (http.upload && http.upload.addEventListener) { http.upload.addEventListener( //      . 'progress', function(e) { if (e.lengthComputable) { // e.loaded —   . // e.total —     . //    —   - :-) } }, false ); http.onreadystatechange = function () { //     if (this.readyState == 4) { //   4 ,    4        if(this.status == 200) { //     //    . // ,  // var result = $.parseJSON(this.response); //       . } else { //       . } } }; http.upload.addEventListener( 'load', function(e) { //         . //       . //  . }); http.upload.addEventListener( 'error', function(e) { // ,   ! }); } var form = new FormData(); //   . form.append('path', '/'); //   . for (var i = 0; i < files.length; i++) { form.append('file[]', files[i]); //      . } http.open('POST', '/upload.php'); //    . http.send(form); //   ,    .  XHR. } 

3. फ़ाइल रीडर के माध्यम से डाउनलोड करें

फाइल रीडर को ही ब्राउजर साइड की फाइलों के साथ काम करने के लिए बनाया गया है। आइए इस ऑब्जेक्ट का उपयोग करके फ़ाइलें अपलोड करने का प्रयास करें। याद रखें कि सफारी में फाइल रीडर ऑब्जेक्ट नहीं है!

 if (window.FileReader === undefined) { //      //   — ! } //        . //        ,  . //  ... var dropbox = $('#file-drag'); dropbox[0].ondragover = function() { return false; }; dropbox[0].ondragleave = function() { return false; }; dropbox[0].ondrop = function(e) { var files = e.dataTransfer.files; uploadFile(files[i]); e.preventDefault(); e.stopPropagation(); return false; }; //     . // -,    0   . // -,       . //     function uploadFile(file) { var reader = new FileReader(); reader.onload = function() { var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress-bar", function(e) { if (e.lengthComputable) { // -,  ;-) } }, false); //    load  error xhr.onreadystatechange = function () { if (this.readyState == 4) { if(this.status == 200) { } else { //  :-( } } }; xhr.open("POST", "upload.php"); //       ,     . var boundary = "xxxxxxxxx"; //  . xhr.setRequestHeader('Content-type', 'multipart/form-data; boundary="' + boundary + '"'); xhr.setRequestHeader('Cache-Control', 'no-cache'); //   . var body = "--" + boundary + "\r\n"; body += "Content-Disposition: form-data; name='superfile'; filename='" + unescape( encodeURIComponent(file.name)) + "'\r\n"; // unescape        . body += "Content-Type: application/octet-stream\r\n\r\n"; body += reader.result + "\r\n"; body += "--" + boundary + "--"; //     Chrome,       . if (!XMLHttpRequest.prototype.sendAsBinary) { XMLHttpRequest.prototype.sendAsBinary = function(datastr) { function byteValue(x) { return x.charCodeAt(0) & 0xff; } var ords = Array.prototype.map.call(datastr, byteValue); var ui8a = new Uint8Array(ords); this.send(ui8a.buffer); } } //  . if(xhr.sendAsBinary) { //   Firefox xhr.sendAsBinary(body); } else { //   (    W3C) xhr.send(body); } }; //   reader.readAsBinaryString(file); }; 

यह लेख उपयोग के लिए एक निर्देश नहीं है, लेकिन केवल एचटीएमएल 5 की क्षमताओं की खोज के लिए एक गाइड है। कोड आदर्श होने का दावा नहीं करता है। मुझे खुशी होगी अगर कोई कंप्लेन करे या करेक्ट करे।