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

मैंने दूसरी बाइक क्यों बनाई?

वर्तमान परियोजनाओं में से एक पर काम करना, मुझे फिर से सुविधाजनक और तेज़ फ़ाइल डाउनलोड को लागू करने की आवश्यकता का सामना करना पड़ा। प्लूपलोड ने एक परिचित इशारे के साथ खुलासा किया, लेकिन फिर उसने सोचा।

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



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

मैंने FileReader के माध्यम से डाउनलोड विधि को चुना है। फिलहाल, यह लोकप्रिय ब्राउज़रों के सभी नए संस्करणों ( अधिक ) द्वारा समर्थित है। यहां तक ​​कि इंटरनेट एक्सप्लोरर 10, विंडोज 8 का हिस्सा, जो संयोगवश, कोने के चारों ओर (26 अक्टूबर, खुदरा बिक्री की शुरुआत) है।

डेमो कहां है?

डेमो यहां देखा जा सकता है , या संग्रह डाउनलोड कर सकता है।

डेमो क्या कर सकता है?

डेमो एक समय में 10 फ़ाइलों को डाउनलोड कर सकता है, प्रत्येक में 5 एमबी से अधिक नहीं और कुल में 50 एमबी से अधिक नहीं। इसके अलावा, यह प्रतिबंध फ़ाइलों के प्रत्येक बैच को लोड करने के बाद रीसेट किया गया है। लोड होते ही प्रगति बार दिखाता है। बटन को चालू और बंद करें जब तक कि सूची में फ़ाइलें हैं जिन पर कार्य किया जा सकता है (अपलोड / हटाएं)।

डेमो में न्यूनतम "प्रोजेक्ट-विशिष्ट" कोड होता है और इसे आसानी से और जल्दी से किसी भी प्रोजेक्ट में लागू किया जा सकता है।

और यह कैसे काम करता है?

ऑपरेशन का सिद्धांत, सिद्धांत रूप में, एक खुला रहस्य नहीं है।

1) ड्रैग-एन-ड्रॉप के लिए, जो, डेस्कटॉप ब्राउज़र के सभी नए संस्करणों पर काम करता है , हम इस तरह की घटनाओं पर लटकाते हैं:

$('.dropbox') .on('drop', function(event) { if (event.originalEvent.dataTransfer.files.length) { //        addFiles. event.preventDefault(); event.stopPropagation(); addFiles(event.originalEvent.dataTransfer.files); $(this).css('border-color', 'gray'); $(this).css('color', 'gray'); } }) .on('dragenter', function(event) { //     . $(this).css('border-color', 'green'); $(this).css('color', 'green'); }) .on('dragleave', function(event) { //  . $(this).css('border-color', 'gray'); $(this).css('color', 'gray'); }); 

2) हम एक फ़ाइल को मानक इनपुट के माध्यम से जोड़ने की क्षमता छोड़ देंगे [टाइप = फ़ाइल] इसमें कई गुण जोड़कर, जो हमें एक साथ कई फ़ाइलों का चयन करने की अनुमति देगा। आपको ब्राउज़रों द्वारा इसके समर्थन के बारे में भी नहीं सोचना है (मैं आपको याद दिलाता हूं, हम एक बैक-एंड के बारे में बात कर रहे हैं, जो पुराने ब्राउज़र में उपयोग किए जाने की संभावना नहीं है)।

 <input type="file" name="file" size="1" multiple /> 

 $('input[type=file]').on('change', function(event) { addFiles(this.files); }); 

3) वास्तव में addFiles स्वयं कार्य करता है, जिसका उल्लेख ऊपर की लिस्टिंग में किया गया था। यहां मैं इसे अंश में दूंगा, गैर-महत्वपूर्ण चीजों को छोड़ कर, आप इसे पूरी तरह से संग्रह (/js/FRUploader.js) से स्क्रिप्ट में देख सकते हैं। यह फ़ंक्शन अंतिम उपाय नहीं है, यह केवल चयनित लोगों की सूची में फाइलें जोड़ता है, साथ ही विभिन्न प्रतिबंधों के लिए फाइलों की जांच करता है (मेरे डेमो में अधिकतम फ़ाइल आकार का कॉन्फ़िगरेशन, कुल फ़ाइल आकार पर प्रतिबंध और उनकी संख्या प्रदान की जाती है):

 function addFiles(files) { $.each(files, function(i, v) { //     . if (v.size > maxfs) { maxfsFiles.push(v.name); } else if (flist.length >= maxfc) { $('div#maxfcerr').show('fast'); return false; } else if (maxts - curts < v.size) { $('div#maxtserr').show('fast'); return false; } else { //  . var fr = new FileReader(); fr.file = v; fr.readAsDataURL(v); //        . var row = document.createElement('tr'); /* *         ,       . */ $('table tbody').append(row); //     . flist.push({file: v, trnum: 'id' + index}); } }); } 

4) एक फ़ंक्शन जो सीधे सर्वर पर फाइलें अपलोड करता है। इसे डाउनलोड बटन पर क्लिक करके बुलाया जाता है।

 function uploadFile(file, trnum) { if (file) { var xhr = new XMLHttpRequest(); upload = xhr.upload; //    progress,   "" -. upload.addEventListener('progress', function(event) { if (event.lengthComputable) { var pbar = $('tr.' + trnum + ' td.size div.pbar'); pbar.css('width', Math.round((event.loaded / event.total) * 100) + 'px'); } }, false); //    load,      - . upload.addEventListener('load', function(event) { var pbar = $('tr.' + trnum + ' td.size div.pbar'); pbar.css('width', '100px'); pbar.css('background', 'green'); }, false); //    error,     - . upload.addEventListener('error', function(event) { var pbar = $('tr.' + trnum + ' td.size div.pbar'); pbar.css('width', '100px'); pbar.css('background', 'red'); }, false); //  . xhr.open('POST', 'handler.php'); //  . xhr.setRequestHeader('Cache-Control', 'no-cache'); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("X-File-Name", file.name); //  . xhr.send(file); } } 

5) ठीक है, और, ज़ाहिर है, सर्वर हैंडलर (हैंडलर। एफपीपी)। मैं किसी को भी याद दिलाना चाहता हूं जो मेरे कोड को आधार के रूप में लेना चाहता है, निस्संदेह जावास्क्रिप्ट फ़ाइलों की जांच करने पर पूरी तरह भरोसा नहीं करना चाहिए। सर्वर पर, आपको यह भी जांचना होगा कि फ़ाइल सभी प्रतिबंधों से गुजरती है या नहीं। डेमो में, यह छोड़ा गया है:

 if (!array_key_exists('HTTP_X_FILE_NAME', $_SERVER) || !array_key_exists('CONTENT_LENGTH', $_SERVER)) exit(); $fname = $_SERVER['HTTP_X_FILE_NAME']; $fsize = $_SERVER['CONTENT_LENGTH']; if (!$fsize) exit(); file_put_contents("upload/".$fname, file_get_contents("php://input")); 

जैसा कि आप देख सकते हैं, FileReader के माध्यम से डाउनलोड करने के मामले में, FormData के विपरीत, हम सीधे फ़ाइल को स्टड ( php: // input ) से पढ़ और लिख सकते हैं।

मुझे पूर्वावलोकन चाहिए!

FileAPI के माध्यम से फ़ाइल डाउनलोड के कार्यान्वयन के विभिन्न उदाहरणों को ध्यान में रखते हुए, मैं निस्संदेह अक्सर छवि लोड करने से पहले भवन पूर्वावलोकन के साथ मिला था। तकनीकी रूप से, यह करना आसान है:

 if (file.type.search(/image\/.*/) != -1) { var thumb = new Image(); thumb.src = ev.target.result; thumb.addEventListener("load", function() { maxwidth = 120; maxheight = 90; if (thumb.width > thumb.height) { thumb.height = thumb.height / (thumb.width / maxwidth); thumb.width = maxwidth; } else { thumb.width = thumb.width / (thumb.height / maxheight); thumb.height = maxwidth; } }, false); thumb.load; td.appendChild(thumb); delete thumb; } 

लेकिन जब मैंने कुछ बेहद हेवीवेट तस्वीरें (प्रत्येक में 10 से 16 एमबी तक की 8 तस्वीरें) अपलोड करने की कोशिश की, तो ओपेरा 12.02 को छोड़कर सभी ब्राउजर अलग हो गए, जो कि बहुत लंबे विचार-विमर्श के बाद भी बंद हो गए, लेकिन किसी भी कार्रवाई पर बहुत धीरे-धीरे प्रतिक्रिया व्यक्त की।

यह इस तथ्य के कारण है कि पूर्वावलोकन छवि डेटा के माध्यम से भरी हुई है: / और base64 एन्कोडेड फ़ाइल सामग्री। 120x90 पूर्वावलोकन के लिए, पृष्ठ पर एक 16-मेगाबाइट 5184x3456 छवि शामिल है। बहुत लंबे समय तक मैंने परिणामी छवि को आकार देने और पूर्वावलोकन के लिए उपयोग करने के लिए मक्खी पर कम से कम कोई रास्ता खोजने की कोशिश की, लेकिन या तो जावास्क्रिप्ट यह नहीं जानता कि यह कैसे करना है, या मैं खोज नहीं कर सकता। यदि टिप्पणियों में कोई व्यक्ति समस्या को हल करने का एक तरीका सुझाता है - तो मैं बहुत आभारी रहूंगा।