वरीयताओं और नर्तकियों के साथ HTML5 फ़ाइल एपीआई का उपयोग करके फ़ाइलें डाउनलोड करें

प्रस्तावना

फ़ाइलें अपलोड करना हमेशा वेब विकास में एक विशेष स्थान पर कब्जा कर लिया है।

<इनपुट प्रकार = फ़ाइल /> शैलियों के साथ स्टाइल की कठिनाई के बारे में बहुत कुछ कहा जा चुका है। आप इस बारे में पढ़ सकते हैं, उदाहरण के लिए, लिंक एक , दो , तीन , चार , पांच , छह के माध्यम से ।

लेकिन फ़ाइल अपलोड प्रक्रिया स्वयं ही तुच्छ नहीं है, कई अलग-अलग तरीके हैं - और एक भी आदर्श नहीं है।



मैंने पहले से ही हमारी परियोजना फाइलों पर कार्यान्वयन के बारे में लिखा था । छह महीने पहले mail.Ru चांदी-लोडर। उस समय, iframe, फ्लैश, सिल्वरलाइट और सामान्य फ़ाइल अपलोड का समर्थन किया गया था। लेकिन प्रगति अभी भी स्थिर नहीं है, और अब सभी प्यारे ब्राउज़रों के नवीनतम बीटा संस्करण पूरी तरह से HTML5 FileAPI का समर्थन करते हैं (निष्पक्षता में, यह ध्यान देने योग्य है, हमेशा की तरह, अजीबोगरीब तरीके से कुछ समर्थन करते हैं, लेकिन नीचे उस पर अधिक)।



जब लेख लिखा जा रहा था, तो Chrome 9 को स्थिर और जबरदस्ती अपडेट किया गया था जो पहले से ही संस्करण 8 के इंस्टॉलेशन के 75% पर अपडेट किया गया था। तो, हम पहले स्थिर ब्राउज़र के साथ फ़ाइल एपीआई समर्थन का जश्न मनाते हैं, हुर्रे!



हमने सोचा था कि इस तरह की तकनीक का उपयोग नहीं करना उपयोगकर्ता उपयोगकर्ताओं के खिलाफ अपराध होगा।

सोचा - और मौजूदा विकल्पों के अलावा एचटीएमएल 5 डाउनलोड को लागू किया।

नतीजतन, हमारे उपयोगकर्ताओं को बहुत सारे उपहार मिले:

- कनेक्शन ब्रेक (और यहां तक ​​कि ब्राउज़र पुनरारंभ!) के बाद पारदर्शी पुनः लोड;

- कतार डाउनलोड करें;

- प्रगति बार (मैकओएस और सफारी उपयोगकर्ता अंततः किसी भी विदेशी प्लगइन्स के बिना प्रगति देख सकते हैं), कतार से फ़ाइलों को हटाने की क्षमता अगर वे अपना दिमाग बदलते हैं।





फ़ाइल एपीआई का उपयोग हम जावास्क्रिप्ट कोड से प्रोग्रामेटिक रूप से कर सकते हैं:

1. संवाद में चयनित फ़ाइलों की एक सूची प्राप्त करें, उनके आकार और माइम प्रकार (जो, वैसे, पर गिना नहीं जाना चाहिए, क्योंकि ब्राउज़र विस्तार से कुछ लोकप्रिय फ़ाइल प्रकारों का निर्धारण नहीं करते हैं)।

2. फ़ाइल में मेमोरी से फ़ाइल की संपूर्ण सामग्री को लोड किए बिना फ़ाइल से बाइट्स की आवश्यक सीमा प्राप्त करें (फ्लैश और फ़ायरफ़ॉक्स 3 के विपरीत - नोट 1 देखें)।

3. सर्वर पर पूरी फाइल और उसके स्लाइस दोनों को अपलोड करें।

4. एक ड्रैग-एन-ड्रॉप में फाइलें अपलोड करें।

5. एक साथ (समानांतर में) कई फाइलें डाउनलोड करें।

यानी हमें फ़ाइल हेरफेर के लिए किसी भी प्लगइन्स की आवश्यकता नहीं है, और यह निश्चित रूप से बहुत अच्छा है!

कहानी

वास्तव में फाइल डाउनलोड करना कुछ ही लाइनों में फाइल एपीआई में लागू किया जाता है, लेकिन हमने कुछ अच्छी विशेषताएं जोड़ी (डाउनलोड कतार, जब कनेक्शन टूट गया है तो पुनः लोड हो रहा है) और कोड थोड़ा और अधिक जटिल हो गया है।

प्रोजेक्ट फ़ाइलें पर लोडर कोड Mail.Ru पहुंच योग्य है और बाधित नहीं है और इसका अध्ययन किया जा सकता है, लेकिन यह परियोजना और इसकी विशेषताओं से बंधा हुआ है, इसलिए हम एक उदाहरण के रूप में हल्के अपलोडर प्रोजेक्ट का उपयोग करते हुए इस शुद्ध रूप में इस लोडिंग तंत्र पर विचार करेंगे।



तो चलिए जाने ...



हम onchange हैंडलर इनपुट पर लटकाते हैं।

oself.file_elm.onchange = function() { oself.onSelect(this); // 'this' is a DOM object here }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इनपुट ऑब्जेक्ट एचटीएमएल 5 कई विशेषताओं का समर्थन करता है जो संवाद में एक समय में कई फाइलों के चयन की अनुमति देता है और स्वीकार करें (नोट 2 देखें), जो निर्दिष्ट माइम प्रकारों के अनुसार संवाद में फाइलों को फ़िल्टर करता है।



OnSelect मेथड में, हम फाइल्स ऐरे के ऊपर जाते हैं (जिसमें चयनित फ़ाइलों की ब्राउज़र-जनरेटेड लिस्ट होती है), डिफ़ॉल्ट प्रॉपर्टीज़ सेट करते हैं, और प्रत्येक फाइल के लिए onSelect ईवेंट जनरेट करते हैं।

उसके बाद, हम बटन को फिर से बनाते हैं, अर्थात। इनपुट हटाएं और इसे फिर से बनाएं। बटन के फॉर्म के अंदर होने पर मामले में सर्वर को फॉर्म भेजते समय चयनित फ़ाइलों को फिर से लोड करने से रोकने के लिए ऐसा किया जाता है।

इस मामले में डाउनलोड के सर्जक onSelect इवेंट श्रोता हैं, जो लोडर ऑब्जेक्ट एन्केयुवेटलोड के तरीके को कॉल करते हैं।

 /* n -    ,    file -    File idx -     cnt -       */ function onSelect(n, file, idx, cnt) { if(file.size > 1 * 1024 * 1024) { alert("File is too big!\nMaximum size is 1 MB."); return; } var d = document.createElement('div'); d.id = 'file_' + file.id + '_' + n; document.getElementById('file_list_' + n).appendChild(d); d.innerHTML = '<a href="#" id="file_' + file.id + '_cancel_' + n + '">X</a>' + file.name + ' (' + file.size + ') <span id="file_' + file.id + '_status_' + n + '">...</span>' document.getElementById('file_' + file.id + '_cancel_' + n).onclick = function() { window['up' + n].cancelUpload(file.id); return false; }; window['up' + n].enqueueUpload(file, 'http://lwu.no-ip.org/upload', "arg1=val1&arg2=val2"); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

EnqueueUpload विधि फ़ाइल को लोडर की आंतरिक कतार में जोड़ता है, फ़ाइल को फ्रंटएंड कतार में जोड़ता है (फ्रंटएंड एक इकाई है जो उपयोगकर्ता के साथ सहभागिता करता है और उसे फ़ाइलों का चयन करने की अनुमति देता है, अर्थात या तो इनपुट, या फ्लैश या सिल्वरलाइट प्लगइन) और startNextUpload विधि को कॉल करता है, जो या तो तुरंत यदि प्रारंभ के दौरान निर्दिष्ट फ़ाइलों की संख्या एक ही समय में लोड की गई है, तो इस फ़ाइल का डाउनलोड प्रारंभ करें या इसे स्थगित कर दें।



फ्रंटएंड कतार में एक फ़ाइल जोड़ते समय, html5 फ्रंटेंड फ़ाइल के अद्वितीय हैश की गणना तंत्र शुरू करता है, जिसकी सहायता से [हैश] पुनः लोड किया जाता है। विवरण लेख में सिल्वरलाइट-लोडर के बारे में पाया जा सकता है।

हाँ, Adler32 एल्गोरिथ्म का उपयोग करके हैश की फिर से गणना की जाती है।

 oself.addFile = function(fo) { upFE_html5.superclass.addFile.apply(oself, [fo]); oself.calcChunkSize(fo); oself.calcFileHash(); // run calculation for next file };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

स्थानीय भंडारण (उर्फ वेबस्टोरेज ) एक और एचटीएमएल 5 तत्व है, जो आपको सत्र की अवधि ( सेशनस्टोर ) या स्थायी रूप से ( लोकलस्टोरेज ) उपयोगकर्ता की ओर से कुंजी-मूल्य प्रारूप में मनमाना डेटा स्टोर करने की अनुमति देता है।

जब कतार फ़ाइल डाउनलोड तक पहुंच जाती है, तो स्टार्ट-लोड बूटलोडर विधि को कहा जाता है, जो ऑनस्टार्ट ईवेंट को उठाता है और डाउनलोड शुरू करता है।

 oself.startUpload = function(id, url, data) { var fo = oself.getFile(id); fo.url = url; // at this moment url already fetched from localStorage if info presents fo.data = data; fo.full_url = fo.url + (fo.url.match(/\?/) ? '&' : '?') + fo.data; fo.retry = oself.opts.maxChunkRetries; oself.broadcast('onStart', fo); oself.uploadFile(fo); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

UploadFile विधि फ़ाइल को सीधे सर्वर पर अपलोड करती है।

 oself.uploadFile = function(fo) { oself.calcNextChunkRange(fo); var blob, simple_upload = 0; try { blob = fo.slice(fo.currentChunkStartPos, fo.currentChunkEndPos - fo.currentChunkStartPos + 1); } catch(e) { // Safari doesn't support Blob.slice method blob = new FormData(); blob.append('Filedata', fo); simple_upload = 1; }; fo.xhr = new XMLHttpRequest(); fo.xhr.onreadystatechange = function() { if(this.readyState == 4) { try { if(this.status == 201) { // chunk was uploaded succesfully var range = this.responseText; try { // getResponseHeader throws exception during cross-domain upload, but this is most reliable variant range = this.getResponseHeader('Range'); } catch(e) {}; if(!range) { throw new Error('No range in 201 answer'); } fo.uploadedRange = range; // store range for case of later retry fo.retry = oself.opts.maxChunkRetries; // restore retry counter userStorage.set(fo); // add or update file info in localStorage oself.uploadFile(fo); } else if(this.status == 200) { fo.responseText = this.responseText; fo.loaded = fo.size; // all bytes were uploaded userStorage.del(fo); // delete file info from localStorage oself.broadcast('onDone', fo, fo.responseText); } else if(this.status == 0 && fo.cancel == 1) { //t('Aborted uploading for id=' + fo.id); } else { throw new Error('Bad http answer code'); } } catch(e) { // any exception means that we need to retry upload oself.retryUpload(fo); }; } }; fo.xhr.open("POST", fo.full_url, true); fo.xhr.upload.onprogress = function(evt) { fo.loaded = (simple_upload ? 0 : fo._loaded) + evt.loaded; oself.broadcast('onProgress', fo); }; if(!simple_upload) { fo.xhr.setRequestHeader('Session-ID', fo.sessionID); fo.xhr.setRequestHeader('Content-Disposition', 'attachment; filename="' + encodeURI(fo.name) + '\"'); fo.xhr.setRequestHeader('Content-Range', 'bytes ' + fo.currentChunkStartPos + '-' + fo.currentChunkEndPos + '/' + fo.size); fo.xhr.setRequestHeader('Content-Type', 'application/octet-stream'); } fo.xhr.withCredentials = true; // allow cookies to be sent fo.xhr.send(blob); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

कोड में टिप्पणियाँ सफारी ब्राउज़र में एचटीएमएल 5 फ़ाइल एपीआई के लिए अधूरा समर्थन दिखाती हैं (कम से कम विंडोज ओएस पर), नोट देखें 3।

जब त्रुटियां होती हैं, तो RetryUpload पद्धति को लॉन्च किया जाता है, जो बार-बार फ़ाइल को बूटलोडर इनिशियलाइज़ेशन के दौरान निर्दिष्ट समय की संख्या को डाउनलोड करने का प्रयास करता है, प्रत्येक विफलता पर प्रयासों के बीच अंतराल को बढ़ाता है।

यदि प्रयासों की संख्या समाप्त हो जाती है, तो एक ऑनरर घटना उत्पन्न होती है।

 oself.retryUpload = function(fo) { fo.retry--; if(fo.retry > 0) { var timeout = oself.opts.retryTimeoutBase * (oself.opts.maxChunkRetries - fo.retry); setTimeout(function(){oself.uploadFile(fo)}, timeout); } else { oself.broadcast('onError', fo. lwu.ERROR_CODES.OTHER_ERROR); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

काम करने के लिए इस सभी चमत्कार के लिए, अपलोड मॉड्यूल के साथ nginx को सर्वर पर स्थापित किया जाना चाहिए। इसके बारे में थोड़ा और पिछले लेख में लिखा गया था।

इसके बजाय एक के बाद ...

मैं कुछ विचार व्यक्त करना चाहूंगा:

1. फिलहाल, फाइलएपीआई क्रोम 8 और इसके बाद के संस्करण, फ़ायरफ़ॉक्स 4 बीटा और आंशिक रूप से सफारी 5 का समर्थन करता है । मैं InternetExplorer और ओपेरा में समर्थन को लागू करने के बारे में कुछ नहीं जानता।

हालाँकि, हमने कष्टप्रद बग के कारण Chrome 8 को बंद कर दिया, जिसके कारण संवाद में कई फ़ाइलों का चयन करना असंभव है।

फ़ायरफ़ॉक्स 3 अपने तरीके से फाइलएपीआई का समर्थन करता है, तत्काल जरूरी फॉर्मडैट ऑब्जेक्ट के लिए कोई समर्थन नहीं है, इसलिए बड़ी फ़ाइलों को डाउनलोड करना संभव नहीं है, क्योंकि फ़ाइल की संपूर्ण सामग्री को कंप्यूटर मेमोरी में पढ़ने की आवश्यकता है।

2. स्वीकार विशेषता बहुत अनाड़ी रूप से काम करती है, ब्राउज़र केवल कई माइम प्रकारों को नहीं समझते हैं। इसलिए, यह मेरे लिए एक रहस्य बना हुआ है कि फ़िल्टरिंग इस तरह से क्यों की जाती है, न कि एक्सटेंशन की सूची के अनुसार, जैसा कि फ्लैश और सिल्वरलाइट में किया जाता है।

3. Safari ब्राउज़र FileReader ऑब्जेक्ट और Blob.slice पद्धति को लागू नहीं करता है, इसलिए html5 पुनः लोड करना इसमें काम नहीं करता है। चूंकि रीलोडिंग एक बहुत ही उपयोगी "बन" है, इसलिए हमने सफारी में लोडिंग लोडरों के क्रम को बदल दिया, जिससे सिल्वरलाइट अधिक बेहतर हो गई।

4. पूरी तरह से स्पष्ट नहीं है, लेकिन बिटवाइज़ ऑपरेशंस का उपयोग करते समय, जावास्क्रिप्ट ऑपरेंड्स को हस्ताक्षरित इंट 32 प्रकार में परिवर्तित करता है। और कब से Adler32 चेकसम की गणना करने के लिए, आपको अहस्ताक्षरित संख्याओं की आवश्यकता है, आपको बाईं ओर की बिट शिफ्ट को छोड़ना होगा और 65536 से गुणा का उपयोग करना होगा।

5. क्लाइंट पर फ़ाइल नाम का URI- एन्कोडिंग करना और सर्वर पर डिकोड करना आवश्यक है, क्योंकि नाम सामग्री-विवाद हेडर में आता है, और हेडर में मानक के अनुसार गैर-एएससीआईआई अक्षर नहीं होना चाहिए।

6. फायरबग प्लग-इन या जैसे को अक्षम करने की आवश्यकता के बारे में उपयोगकर्ताओं को चेतावनी देना सुनिश्चित करें, और यहाँ क्यों है: नेटवर्क टैब पर फायरबग सभी नेटवर्क गतिविधि को लॉग करता है और सभी अनुरोधों को पूरी तरह से बचाता है, और तब से चूँकि हमारे अनुरोध आकार में छोटे हैं, इसलिए प्लगइन का बिल्ट-इन लिमिटर काम नहीं करता है और बड़ी फ़ाइलों पर हम ब्राउज़र द्वारा बहुत अधिक मेमोरी खपत प्राप्त कर सकते हैं।



दिमित्री Dedyukhin, फ़ाइलें Mail.Ru के एक प्रमुख डेवलपर