मेरा अंतिम फ़ाइल अपलोडर

मैं एक गैर-मुख्य शिक्षा और ~ 10 वर्षों के अनुभव के साथ एक वेब डेवलपर हूं। मैंने वेब के लिए सब कुछ किया जो केवल मेरे ग्राहकों को हो सकता है और कभी-कभी, उनके वरिष्ठों को। मुझे यह नौकरी बहुत पसंद है। लेकिन फिर भी कुछ चीजें हैं जो मैं बिना मुस्कुराए करता हूं। उनमें से एक फ़ाइल अपलोडर है। शुरू से ही - जब यह अजाक्स बनाने के लिए किसी के पास कभी नहीं हुआ था - और अब तक - जब यह चित्रों का आकार बदलता है, तो कई धाराओं में फाइलें अपलोड करता है और बहुत कुछ, बहुत अधिक - यह मेरे लिए सबसे अनलिखित कार्यों में से एक बना हुआ है। ऐसा लगता है कि मैं इसे संभालने में कामयाब रहा। यदि दिलचस्पी है, तो बिल्ली में आपका स्वागत है।

एक छोटी सी कॉफ़ीस्क्रिप्ट आपके लिए प्रतीक्षा कर रही है, jQuery के बारे में बहुत सारी शिकायतें, $ का संक्षिप्त विवरण। पसंदीदा, जगह में से एक और अनजाने में लागू पैटर्न और एक अजीब और दिलचस्प पुस्तक का लिंक।





इसलिए, हमारे सामने कार्य साइट पर एक फ़ाइल अपलोडर अपलोड करना है। बेशक, AJAX, ज़ाहिर है, प्रगति के साथ और निश्चित रूप से, पहले से ही तैयार डिजाइन में। शुरू करने के लिए - यह एक समस्या क्यों है? क्रॉस ब्राउज़र। अच्छे पुराने ट्रिक्स (iframe में एक-ला सबमिट फॉर्म) हमें प्रगति नहीं देंगे, और नए (xhr.send) पुराने ब्राउज़रों में काम नहीं करेंगे। ब्राउज़रों के मानकीकरण की एक उम्मीद थी कि अचानक मृत्यु हो गई , जिससे क्रॉस-ब्राउज़र समस्या नहीं मरेगी। एक अतिरिक्त कार्य Drag'n'Drop है। अभी भी input'a की उपस्थिति के साथ परेशानी है।

हमारे पास क्या विकल्प हैं?

मार्ग संख्या 1, Google- संचालित-विकास

Shustrenko google एक काफी लोकप्रिय jQuery लाइब्रेरी है जो सभी आवश्यक कार्यों को कार्यान्वित करता है। समय की कमी के साथ दृष्टिकोण सही है। यह परियोजना में बहुत जल्दी एकीकृत करता है, ब्राउज़र के साथ संगतता के बारे में खुद को चिंतित करता है, और यहां तक ​​कि कुछ स्वरूपित डोम को भी प्रदर्शित करता है। सब के बाद, वहाँ कोई समस्या नहीं है शैलियों के साथ DOM (या यहाँ तक कि jQuery का उपयोग करके, यह इसका मुख्य विशेषज्ञता, सही?), डिजाइनरों को थोड़ा स्थानांतरित करने के लिए चुपचाप आश्वस्त करता है ("हाँ, मैं आपके साथ ऐसा नहीं कर सकता, नरक में जा सकता हूं!"), यहां तक ​​कि साथ सहमत हूं। कार्यक्षमता के बारे में रुचि रखने वाले दलों ("ठीक है, हाँ, हमने नहीं किया। लेकिन यह देखें कि दुर्घटना की तरफ किस तरह की चिप दुर्घटना से हुई है। क्या यह वास्तव में सुपर है?")। और सब कुछ सुपर लगता है, और सब कुछ बहुत अच्छा लगता है। एक दिन के लिए, इसका सामना करना और परीक्षण के लिए देना काफी संभव है। लेकिन फिर ... पहला निगल डिजाइनरों से उड़ जाएगा - कुछ दिवा निकल गया (किसी ने डाउनलोड को बाधित किया, या किसी अन्य को बनाया, अधिक आकर्षक)। लेकिन आपने इस div को नहीं देखा है, और इसलिए इसे हल्का करने के लिए इस पर शैली, समान नहीं हैं। हम डिजाइनरों के अच्छी तरह से योग्य रिप्रोच को पचाते हैं, हम परीक्षकों के एक प्रतिनिधिमंडल के आगमन का निरीक्षण करते हैं। यह पता चला है कि कुछ अद्भुत ब्राउज़र में, जिसमें, कॉर्पोरेट मानकों के कारण, हमारे उपयोगकर्ताओं के XX प्रतिशत के रूप में (और सबसे मूल्यवान!) कार्य, प्रगति प्रदर्शित नहीं होती है! हॉरर। आप परीक्षकों को नरक में भेजने के लिए स्वतंत्र महसूस करते हैं ("ठीक है, अगर ब्राउज़र समर्थन नहीं करता है तो मैं यह कैसे कर सकता हूं?") और एक विजयी नज़र के साथ आप जबड़े में हुक छोड़ देते हैं: "तो, इस ब्राउज़र में Vkontakte अपलोड काम करता है!" और बस उस पल में आप परियोजना के खिलाफ सबसे खराब अपराधों में से एक करते हैं - आप इस अद्भुत प्लगइन के स्रोत कोड में जाते हैं। (एक विकल्प के रूप में, प्लगइन ट्रैकर में इस त्रुटि के बारे में पिछले वर्ष से पहले संदेश ढूंढें और, यदि आप भाग्यशाली हैं, तो किसी प्रकार की बैसाखी इस विशेष समस्या को हल करती है)। वास्तव में, यह आपके लिए उतना डरावना नहीं है जितना एक प्रोग्रामर के लिए। आप किसी और के कोड को पढ़ना सीखेंगे - कभी-कभी अच्छा, कभी-कभी ... अलग। आप एक बार फिर डिबगर का उपयोग करेंगे। किसी भी स्थिति में मैं jQuery के लिए प्लगइन डेवलपर्स के बारे में कुछ भी बुरा नहीं कहना चाहता। यह सिर्फ इतना है कि ज्यादातर मामलों में मैं मिला, उनका कोड किसी बाहरी व्यक्ति के समर्थन के लिए नहीं बनाया गया है। लेकिन परियोजना का समय समाप्त हो सकता है। याद रखें, हमने समय की कमी के कारण इस विकल्प को चुना?

और फिर भी - यदि आप अभी भी प्लग इन करते हैं - तो प्रोजेक्ट रिपॉजिटरी में प्लगइन के केवल मिनिमाइज़ किए गए संस्करण को छोड़ दें। और किसी भी स्थिति में प्लगइन साइट के लिंक को कहीं भी न छोड़ें।

सारांश: हम केवल अपरिचित प्लगइन्स का उपयोग करते हैं यदि आप डिज़ाइन और कार्यक्षमता के लिए बना सकते हैं। खैर, या डिजाइनरों और अन्य परीक्षकों के बदला / प्रशिक्षण के लिए। या रिवर्स इंजीनियरिंग कौशल में एक प्रशिक्षण के रूप में।

पथ संख्या 2, ऐतिहासिक

हा! छह महीने पहले, हमने पहले से ही ऐसा कुछ लिखा था। डच (यूनानी, ऑस्ट्रेलियाई, फारसियों ...) के लिए। अभी भी हरे अंडाकार प्रगति पट्टी थी। हम पुराने प्रोजेक्ट (एक और कंप्यूटर, बर्न-आउट रिपॉजिटरी और अन्य 100500 कारणों से इसे इतना सरल नहीं है) खोलते हैं। देखा अपलोडर, धूम्रपान प्रकार। और वहाँ ... सबसे पहले - केवल नवीनतम ब्राउज़रों के लिए समर्थन। दूसरे, ग्राहक पक्ष पर फ्लैश आकार। तीसरा, यह सबसे यादगार अंडाकार (डिजाइनर मैल है!) प्रगति को अपलोडर कोड में ही हार्ड-वायर्ड किया गया है। चौथा, पाँचवाँ आदि। प्लस उस विशेष परियोजना की बारीकियों का एक गुच्छा। आनंद की दृष्टि से - बर्फ भी नहीं। आधुनिक तकनीक की पहाड़ की ऊंचाइयों पर उड़ान के विचारों के बजाय - एक आधा साल का रोलबैक।

सारांश: दिलचस्प नहीं है। यहां तक ​​कि अगर आप छह महीने पहले एक गुरु थे और केवल उच्च-गुणवत्ता वाला कोड दिया था, तो अब आप वैसे भी कूलर हैं।

पथ संख्या 3, प्रकल्पित

तो, चलो थोड़ा सपना देखने की कोशिश करें। हम क्या चाहते हैं? (बीयर के अलावा, एक पड़ोसी और एक बिल्ली)। कम से कम - हम एक अपलोडर बनाना चाहते हैं। अधिकतम के रूप में, हम इसे एक बार और लंबे समय के लिए करना चाहते हैं। वर्तमान परियोजना से इसे लेना आसान है और इसे न्यूनतम संशोधन के साथ अगले में चिपका दें। वैसे, इच्छा, एक मनोरंजक छोटी पुस्तक - एरिक और एलिजाबेथ फ्रिमेनोव द्वारा डिज़ाइन पैटर्न से प्रेरित है। जी नहीं, यह गैंग ऑफ फोर द गैंग ऑफ द ऑल दैट रीड को पढ़ना चाहिए। यह अन्य बहुत आसान है। इतना मजबूत नहीं, लेकिन पढ़ने में आसान। पहले सिद्धांतों में से एक है कि इसके लेखक पाठक के सिर में ड्राइव करने की कोशिश करते हैं जो कि बदल रहा है। हमारे मामले में, आर्किटेक्चर का सबसे परिवर्तनशील पहलू सर्वर पर डेटा भेजने का तरीका होना चाहिए (न केवल, बल्कि उस पर बाद में)। यदि आपको याद है, तो हमने jQuery प्लगइन से पहले इस समस्या पर चर्चा की। इसलिए, यदि हम सर्वर को डेटा भेजने के लिए तंत्र के कुछ पूल बनाते हैं (यदि आप अधिक ओओपी-आधारित योगों को प्राथमिकता देते हैं - तो एक सामान्य इंटरफ़ेस के साथ कक्षाओं का एक सेट दें) और अपलोडर के साथ एक इंटरैक्शन इंटरफ़ेस को परिभाषित करें - एक बड़ी समस्या कई छोटे लोगों में विभाजित है। और उन्हें हल करने के लिए पहले से ही अच्छे हैं। यह कैसा दिखता है? बहुत सरल:

Uploader = senders: [xhrFile, formDataFile, formDataForm, iframe] send: (options)-> stream = false $.each @senders, (i, func)=> if stream = func(options) false stream
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

अब इस लेख में कोड की गुणवत्ता के बारे में कुछ पंक्तियाँ:

- कोड jQuery से बंधा हुआ है, क्योंकि लेखक का मानना ​​है कि कोई भी परियोजना जल्द या बाद में इसका उपयोग करेगी, लेकिन एक निश्चित संख्या में "सुविधाओं" के कारण, जिसमें डिफर्ड भी शामिल है, जिसे हम बहुत कसकर उपयोग करेंगे।

- आंशिक रूप से कोड एक अद्भुत प्लगइन से लिया जाता है। ईमानदार होने के लिए, इस प्लगइन को पढ़ने से विचार पैदा हुआ था और बोला: "ठीक है, क्यों, क्यों तर्क को कार्यान्वयन से अलग नहीं किया गया है?"

- फिलहाल कोड का खराब परीक्षण किया गया है, यह सिर्फ वास्तुकला का एक चित्रण है।



अब कार्यों के उदाहरण:

  iframe = (options)-> return false unless options.input && options.input.value id = 'frame' + Math.random() $form = $ '<form>', method: options.method, enctype:'multipart/form-data', target: id, action: options.url $('<iframe>', name: id ).appendTo($form).on 'load', -> try response = @contents() throw new Error unless response.length && response[0].firstChild dfd.resolve response, name: options.input.value catch e dfd.reject response, name: options.input.value $form.hide().appendTo('body').submit() (dfd = $.Deferred()).promise()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

  formDataFile = (options)-> return false unless options.files && options.files.length && window.FormData $.when.apply $, options.files.map (f)-> formData = new FormData() formData.append options.name, f xhr = new XMLHttpRequest() dfd = $.Deferred() xhr.onload = xhr.onerror = ->dfd[@status == 200 && 'resolve' || 'reject'] @response, file if xhr.upload xhr.upload.onprogress = (e)->dfd.notify e, file xhr.open options.method, options.url, true xhr.responseType = 'text' xhr.send formData dfd.promise()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

पहले से ही अधिक दिलचस्प होगा। प्रत्येक दी गई फ़ाइलों के लिए (जहाँ विकल्प थे। फ़ाइल्स कहाँ से आए और उसमें नीचे क्या है) हम एक अलग XMLHttpRequest और deferred बनाते हैं। आस्थगित, पहले उदाहरण में, हम सर्वर से डेटा लोड करने के लिए पुनर्निर्देशित या हल करते हैं। असफल-सुरक्षित विधि के विपरीत, समाधान / अस्वीकार के अलावा, हम ब्राउजर को असाइन करता है तो अपलोड प्रगति (xhr.upload.onprogress = (e) -> dfd.notify e, file) के बारे में आस्थगित डेटा भेजेगा। आस्थगित का उपयोग करते हुए, हम $ का उपयोग करते हैं। उन्हें एक में वापस लाने और वापस करने के लिए। इस मामले में, जब उपयोग पूरी तरह से उचित नहीं है, तो मैं ख़ुशी से पढ़ूंगा कि टिप्पणियों में क्यों।







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



एक अनुभवी चौकस पाठक को पहले ही “बा” का उच्चारण करना चाहिए! तो यह कर्तव्यों की एक श्रृंखला है! ”और हाँ, यह 100% सही होगा (जेएस की ख़ासियत और इसे आसान बनाने की इच्छा को ध्यान में रखते हुए)। स्केप्टिक्स ने अपने होंठों, पैटर्न को js में स्क्वीशलीश किया। लेकिन हमने उन्हें नहीं सुना, हमारे लिए कुछ और महत्वपूर्ण है: कार्य की स्थितियों से नृत्य करना और सामान्य ज्ञान द्वारा निर्देशित होना, हम लगभग अपने आप ही पैटर्न की प्राप्ति तक पहुंच गए, जिसका अर्थ है कि हम इसके बारे में थोड़ा पढ़ सकते हैं और आश्चर्य के लिए अग्रिम रूप से तैयार हो सकते हैं। ।



यदि वे एक समस्या को हल नहीं करते हैं, तो उन्हें इसे हल करने का एक स्वीकार्य तरीका मिला। हमारे पास बचा ही क्या है? फाइलों को पढ़ने का काम भी है। ब्राउज़र की क्षमताओं के आधार पर, हम या तो इनपुट में चयनित फ़ाइल का ऑब्जेक्ट प्राप्त कर सकते हैं, या हम फ़ोल्डर की सामग्री (पुनरावृत्ति, यदि आवश्यक हो) भी पढ़ सकते हैं। या हम कुछ भी नहीं कर सकते हैं (अनुमान करें कि कौन सा ब्राउज़र है) - बस इनपुट प्राप्त करें। पाठकों की एक सरणी (कर्तव्यों की एक श्रृंखला) बनाने के लिए और उचित कार्य का चयन करके उस पर पुनरावृति करने के लिए तुरंत ही इच्छा होती है। इसे वहां अपलोड करें, हमारे अपलोड ऑब्जेक्ट में। अब यह इस तरह दिखेगा:

 Uploader = _responsibilityChain: (options, chain, name = false)-> stream = false $.each chain, (i, func)=> if stream = func(options) #        Uploader #          @[name] = func if name false stream readers: [entry, file, input] read: (options)->@_responsibilityChain options, @readers, 'read' senders: [xhrFile, formDataFile, formDataForm, iframe] send: (options)->@_responsibilityChain options, @senders, 'send'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

 #     input = (options)-> return false unless options.input.value $.Deferred().resolve([]).promise() #    -      input #         , Deferred      3-  file = (options)-> files = $.makeArray $(options.input).prop 'files' return false unless files.length if (files[0].name == undefined && files[0].fileName) # File normalization for Safari 4 and Firefox 3: $.each files, (index, file)-> file.name = file.fileName; file.size = file.fileSize; $.Deferred().resolve(files).promise() #   -reader.    . , ..  #  Deferred.    ,    entry = (options)-> roots = $(options.input).prop('webkitEntries') || $(options.input).prop('entries') return false unless roots && roots.length > 0 readEntries = (entries, path='')-> $.when.apply($, $.map entries, (entry)-> dfd = $.Deferred() errorHandler = (e)-> e.entry = entry if e && !e.entry # Since $.when returns immediately if one # Deferred is rejected, we use resolve instead. # This allows valid files and invalid items # to be returned together in one set: dfd.resolve [e] resolveHandler = (file)-> # Workaround for Chrome bug #149735 file.relativePath = path dfd.resolve file if entry.isFile entry._file && resolveHandler(entry._file) || entry.file resolveHandler, errorHandler else if entry.isDirectory entry.createReader().readEntries((entries)-> readEntries(entries, path + entry.name + '/' ).done((files)->dfd.resolve files ).fail(errorHandler) , errorHandler) else # Return an empy list for file system items other than files or directories: dfd.resolve([]); dfd.promise() #we do need this pipe here bc we do resolve some files scoped ).pipe -> Array.prototype.concat.apply [],arguments readEntries(roots).promise()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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



एक चौकस और अनुभवी पाठक को यहाँ कहीं और कहना चाहिए: "पैटर्न नहीं है!"। और फिर, यह 100% सही होगा। अंदर का प्रोग्रामर महसूस करता है कि यहां कुछ गलत है। कुछ पाठकों के काम का परिणाम सभी प्रेषकों को नहीं भेजा जा सकता है (उदाहरण के लिए, इनपुट रीडर के बाद, xhrFile प्रेषक नहीं भेज पाएगा)। खैर, उनके साथ जुबानी। हम इस स्थिति को अनुपयुक्त प्रेषकों के झूठे द्वारा संभाला है। लेकिन सीधे प्रेषक के अंदर इनपुट से डेटा पढ़ना एक बर्फ नहीं है - क्या आप भूल गए हैं, क्या हम अभी भी ड्रैग'एन'ड्रॉप करेंगे? अभी के लिए, इसे छोड़ दें जैसा कि यह है, अचानक एक चमत्कार होता है और टिप्पणियों में समझदार सलाह दिखाई देती है?



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



इसके अलावा - हमें पढ़ने के लिए लिंक भेजने और विकल्पों के लिए कुछ डिफ़ॉल्ट मान जोड़ने की आवश्यकता है। एक बार फिर, हमारे अपलोडर ऑब्जेक्ट में फ़ंक्शन डालें:

 Uploader: #...  ,      upload: (options)-> options = $.extend method: 'POST' name: options.input && options.input.name , options @read(options).then (files)=>$.when.apply $, @send $.extend options, files:files
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यहां सब कुछ सरल है - हम इनपुट से फ़ाइलों को पढ़ते हैं, प्राप्त मूल्यों को विकल्पों में जोड़ते हैं और Uploader.send में भेजने के लिए परिणामी वस्तु वापस करते हैं। प्रेषित से प्राप्त आस्थगित को फिर से समूहीकृत किया जाता है जब हम ग्राहक को आस्थगित समूहीकृत करते हैं।



यह सब कैसे उपयोग करें:

  $('#some-file-input').change -> Uploader.upload(input: this, url: '/files/upload' ) .done -> #         alert "#{arguments.length} files uploaded" .fail -> #          alert "Some files were not uploaded" .progress -> #      (~ 50 ),    console.log arguments
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

सारांश

इनपुट [टाइप = फ़ाइल] प्रदर्शित करने के साथ समस्या के समाधान के रूप में, मैं इस तरह के एक ट्रिक का प्रस्ताव देता हूं - हम इनपुट को स्थिति का उपयोग करके छिपाते हैं: कंटेनर के किनारे से बिल्कुल परे, और इसके लेबल को स्टाइल करें।



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

- एक साथ डाउनलोड की संख्या पर कोई सीमा नहीं

- कोई डाउनलोड रद्द करने की व्यवस्था नहीं

- ग्राहक की ओर से असहज घटनाओं - मैं इस घटना "फ़ाइल अपलोड", "फ़ाइल त्रुटि" करना चाहते हैं। प्रगति की घटना में यह पता लगाने की कोई अंतर्निहित क्षमता नहीं है कि कितनी फाइलें डाउनलोड की गई हैं



यदि यह दिलचस्प होगा - मैं दिखाऊंगा कि कमियों से कैसे छुटकारा पाएं (और एक ही समय में फायदे)। इस पर, मुझे अपनी छुट्टी, बीयर, बैश, पड़ोसी लेने दो।



प्रयुक्त साहित्य की सूची:

1. jQuery- फाइल-अपलोड प्लगइन कोड - github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js

2. jQuery.Deferred प्रलेखन - api.jquery.com/category/deferred-object

3. पुस्तक "डिज़ाइन पैटर्न" फ्रीमैनोव - www.ozon.ru/context/detail/id/20216992