2012 में सर्वर पर फाइल अपलोड करना

एक बिंदु पर, मुझे क्लाइंट पर फ़ाइलों के साथ काम करने और उन्हें सर्वर पर अपलोड करने के लिए एक एपीआई बनाने की चुनौती का सामना करना पड़ा।

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

जो लोग फ्लैश-लोडर लिखते हैं वे समझते हैं कि उन्हें किन समस्याओं का सामना करना पड़ता है:

• कुकीज़ IE से ली जाएंगी;
• प्रॉक्सी सेटिंग्स - एक ही कहानी;
• त्रुटि # 2038, # 2048, ... - अस्थायी त्रुटि, नेटवर्क + ब्राउज़र + फ्लैश प्लेयर के संयोजन पर निर्भर करती है;
• AdBlock, आदि। - कोई टिप्पणी नहीं।

और इसलिए, इस सब को देखते हुए, हमने फैसला किया: यह समय आ गया है, इस समय आ गया है - और निम्नलिखित आवश्यकताओं का गठन किया है:

• एकाधिक फ़ाइल चयन;
• सूचना प्राप्त करना (नाम, आकार और माइम प्रकार);
• डाउनलोड करने से पहले छवि का पूर्वावलोकन करें;
• स्केलिंग, क्रॉपिंग और क्लाइंट पर घुमाव;
• सर्वर + CorS को हुआ सब कुछ अपलोड करना;
• तीसरे पक्ष के पुस्तकालयों से स्वतंत्रता;
• तानाना।

पिछले 4 वर्षों में, फ़ाइल एपीआई सहित एचटीएमएल 5 सुविधाओं पर तेजी से चर्चा की गई है। इस बारे में बहुत सारे लेख लिखे गए हैं, काम के उदाहरण हैं। ऐसा लगता है कि यहां कार्यों को हल करने के लिए तैयार उपकरण है। लेकिन क्या सब कुछ इतना सरल है जितना पहली नज़र में लगता है? ब्राउज़र द्वारा Mail.Ru उपयोगकर्ताओं के आंकड़ों पर विचार करें। केवल वे संस्करण जो फ़ाइल एपीआई का समर्थन करते हैं, सूची से चुने गए हैं, भले ही 100% न हों।



जैसा कि आप आरेख से देख सकते हैं, बस 63% से अधिक ब्राउज़रों ने फ़ाइल एपीआई का समर्थन किया:

• Chrome 10+ (~ 26%)
• फ़ायरफ़ॉक्स 3.6+ (~ 19%)
• ओपेरा 11.10+ (~ 17%)
• सफारी 5.4+ (~ 1.4%)

इसके अलावा, मोबाइल उपकरणों के बारे में मत भूलना, जिनकी हिस्सेदारी दिन-प्रतिदिन बढ़ रही है। iOS 6 पहले से ही फाइल एपीआई को सपोर्ट करता है।

Internet Explorer संस्करण 10 से समर्थन का वादा करता है।

लेकिन 63% किसी भी तरह से 100% नहीं है। इसलिए फ्लैश को मना करना जल्दबाजी होगी।

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

आइए विशिष्ट उदाहरण देखें कि विकास प्रक्रिया कैसे हुई।

फ़ाइलों की सूची प्राप्त करना

यह कैसे HTML5 में फ़ाइलों की एक सूची की तरह लग रहा है। सब कुछ बहुत सरल है।

<input id="file" type="file" multiple /> <script> var input = document.getElementById("file"); input.addEventListener("change", function (){ var files = input.files; }, false); </script> 

लेकिन क्या करें जब फ़ाइल एपीआई समर्थित नहीं है, लेकिन फ्लैश समर्थित है? फ्लैश के साथ काम करने का मूल सिद्धांत यह है कि सभी इंटरैक्शन सीधे इसके माध्यम से होते हैं। आप फ़ाइल चयन संवाद को केवल ले और कॉल नहीं कर सकते।

इसके लिए उपयोगकर्ता को फ़्लैश पर क्लिक करना होगा। केवल इस समय एक संवाद खोला जा सकता है - ऐसी सुरक्षा नीति है।

इसलिए, फ़्लैश ऑब्जेक्ट को वांछित इनपुट पर रखा गया है। यह बहुत सरलता से किया जाता है: माउसओवर ईवेंट हैंडलर को पूरे दस्तावेज़ पर लटका दिया जाता है, और जब आप "मूल" में इनपुट [प्रकार = "फ़ाइल"] पर होवर करते हैं, तो फ्लैश ऑब्जेक्ट प्रकाशित होता है और इसके संपूर्ण स्थान पर कब्जा कर लेता है।

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

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

 flash.cmd("imageTransform", { id: "346515436346", //   matrix: { }, //   callback: "__UNIQ_NAME__" }); 

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

 <span class="js-fileapi-wrapper" style="position: relative"> <input id="file" type="file" multiple /> </span> <script> var input = document.getElementById("file"); FileAPI.event.on(input, "change", function (){ var files = FileAPI.getFiles(input); }); </script> 

छानने

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

कठिनाई क्या है? पूरे बिंदु यह है कि शुरू में फ़ाइलों की सूची प्राप्त करने के बाद हमारे पास केवल न्यूनतम जानकारी होती है, जैसे कि नाम, आकार और प्रकार। अधिक विस्तृत जानकारी प्राप्त करने के लिए, फ़ाइल को पढ़ने की आवश्यकता है। यह FileReader के माध्यम से किया जा सकता है।

परिणाम निम्न फ़िल्टरिंग विधि है:

 FileAPI.filterFiles(files, function (file, info){ if( /^image/.test(file.type) ){ return info.width > 320 && info.height > 240; } else if( file.size ){ return file.size < 10 * FileAPI.MB; } else { // ,   File API  Flash,    . //   ,     ,    . return true; } }, function (files, ignore){ if( files.length > 0 ){ // ... } }); 

इसके अलावा, "बॉक्स से बाहर" छवि की ऊंचाई और चौड़ाई के निर्धारण का समर्थन करता है, और आवश्यक जानकारी के संग्रह को लागू करने का अवसर अभी भी है:

 FileAPI.addInfoReader(/^audio/, function (file, callback){ //    //    callback( false, //    { artist: "...", album: "...", title: "...", ... } ); }); 

छवियों के साथ काम करें

एपीआई बनाने की प्रक्रिया में, मैं छवि के साथ काम करने के लिए एक उपकरण प्राप्त करना चाहता था - उदाहरण के लिए, पूर्वावलोकन बनाने के साथ - और यह कि एचटीएमएल 5 और फ्लैश द्वारा मूल कार्यक्षमता का समर्थन किया गया था।

फ़्लैश

पहला कदम यह समझना था कि फ्लैश के माध्यम से यह कैसे करना है, अर्थात्। छवि बनाने के लिए जेएस को क्या हस्तांतरित करना है। जैसा कि आप समझते हैं, यह डेटा यूआरआई का उपयोग करके किया जाता है। फ्लैश फ़ाइल को बेस 64 के रूप में पढ़ता है, जेएस को स्थानांतरित करता है। शुरुआत में, “data: image / png; base64,” जोड़ें और परिणामस्वरूप स्ट्रिंग का उपयोग “src” के रूप में करें।

हैप्पी एंड? काश, IE6-7 डेटा URIs का समर्थन नहीं करता, और IE8 + जो डेटा URI का समर्थन करता है, 32 KB से अधिक की प्रक्रिया नहीं करता है। इन मामलों में, JS एक दूसरी फ्लैश ड्राइव प्रकाशित करता है, जो Base64 प्रसारित करता है, और यह छवि को पुनर्स्थापित करता है।

एचटीएमएल 5

यहां आपको आवश्यक परिवर्तन करने के लिए पहले मूल प्राप्त करने की आवश्यकता है, और फिर कैनवास के माध्यम से। मूल को दो तरीकों से प्राप्त किया जा सकता है। सबसे पहले FileReader का उपयोग करके फ़ाइल को DataURL के रूप में पढ़ना है। दूसरा - URL.createObjectURL वर्तमान टैब से जुड़ी फ़ाइल के लिए एक लिंक बनाता है। बेशक, दूसरी विधि पूर्वावलोकन बनाने के लिए पर्याप्त है, लेकिन सभी ब्राउज़र इसका समर्थन नहीं करते हैं। और कुछ साथी URL.revokeObjectURL का समर्थन नहीं करते हैं, जो उस ब्राउज़र को बताता है कि अब आपको फ़ाइल का लिंक रखने की आवश्यकता नहीं है।

इन सभी तरीकों के संयोजन के बाद, हमें FileAPI.Image क्लास मिलती है:

• फसल (x, y, चौड़ाई, ऊंचाई) - फसल;
• आकार बदलें (चौड़ाई [, ऊंचाई]) - स्केलिंग;
• रोटेट (नीचा) - रोटेशन;
• पूर्वावलोकन (चौड़ाई, ऊंचाई) - फसल और पैमाने;
• get (कॉलबैक) - अंतिम छवि प्राप्त करें।

ये सभी विधियां परिवर्तन मैट्रिक्स को भरती हैं, और केवल जब प्राप्त विधि को बुलाया जाता है तो इसे लागू किया जाएगा। जब यह इसके माध्यम से काम करता है तो कैनवस या फ़्लैश के माध्यम से परिवर्तन होता है।

प्रक्रिया का आकार बदलें

दर्पण और सिर्फ "साबुन के बक्से" लंबे समय से हमारे जीवन में आए हैं, जो कि 10Mpx से 1.2K रूबल की कीमत पर जारी है। और जब हमने ऐसी तस्वीरों को कंप्रेस करना शुरू किया, तो हमें कुछ इस तरह मिला:



जैसा कि आप देख सकते हैं, कुछ भी अच्छा नहीं सरासर विकृति है। लेकिन, यदि आप इसे दो बार संपीड़ित करते हैं, तो फिर से और फिर से, जब तक हमें आवश्यक आकार नहीं मिलता है, तब तक परिणाम काफ़ी बेहतर होता है।



यहां, तुलना करें, अंतर स्पष्ट है:



यदि आप थोड़ा तेज जोड़ते हैं, तो यह बिल्कुल सही होगा।

हमने अन्य तरीकों की भी कोशिश की, जैसे कि बाइबिक इंटरपोलेशन और लैंक्ज़ोस एल्गोरिथम। वे थोड़ा बेहतर परिणाम देते हैं, लेकिन बहुत धीमी गति से: 1.5 बनाम 200-300ms। साथ ही, यह विधि कैनवस और फ्लैश में समान परिणाम देती है।

फाइलें अपलोड करें

मैं उन तरीकों का एक सारांश बनाऊंगा जिसमें आप अब फ़ाइल को सर्वर पर अपलोड कर सकते हैं।

iframe

हाँ, और वर्षों के बाद भी वह सेवा में है:

 <form target="__UNIQ__" action="/upload" method="post" enctype="multipart/form-data"> <iframe name="__UNIQ__"></iframe> <input name="files" type="file" /> <input name="foo" value="bar" type="hidden" /> </form> 

सबसे पहले, एक परिवहन फॉर्म एक iframe के साथ बनाया जाता है (प्रपत्र का लक्ष्य विशेषता और iframe का मिलान होना चाहिए)। फिर आपको इनपुट [प्रकार = "फ़ाइल"] को उसमें स्थानांतरित करने की आवश्यकता है, क्योंकि यदि आप क्लोन डालते हैं, तो यह "खाली" होगा। यही कारण है कि हम क्लोनिंग के दौरान उन्हें बचाने के लिए एपीआई विधियों के माध्यम से घटनाओं की सदस्यता लेते हैं। फिर हम फॉर्म.सुमिट () कहते हैं और फॉर्म की सभी सामग्री को एक iframe के माध्यम से भेजा जाता है। हमें JSONP का उपयोग करके उत्तर मिलता है।

फ्लैश / सिल्वरलाइट

फ्लैश पहले दिखाई दिया, उसके बाद सिल्वरलाइट, जो फ्लैश का हत्यारा बनने वाला था, लेकिन कुछ एक साथ विकसित नहीं हुआ। सामान्य तौर पर, वहां सब कुछ सरल है: जेएस फ्लैश ऑब्जेक्ट पर विधि को कॉल करता है और लोड होने वाली फ़ाइल की आईडी को पास करता है, और फ्लैश, बदले में, जेएस में सभी राज्यों और घटनाओं की नकल करता है।

XMLHttpRequest + FormData

अब आप न केवल पाठ डेटा, बल्कि बाइनरी भी भेज सकते हैं। यह बहुत सरलता से किया जाता है:

 //     var form = new FormData form.append("foo", "bar"); //    POST-, form.append("attach", file); //  ,   blob //    var xhr = new XMLHttpRequest; xhr.open("POST", "/upload", true); xhr.send(form) 

लेकिन क्या करना है जब आपको एक फ़ाइल नहीं भेजने की आवश्यकता होती है, लेकिन, उदाहरण के लिए, कैनवास? इसके दो तरीके हैं। सबसे पहले, यह सबसे सही और सरल है, निश्चित रूप से, कैनवस को ब्लॉब में बदलें:

 canvasToBlob(canvas, function (blob){ var form = new FormData form.append("foo", "bar"); form.append("attach", blob, "filename.png"); //      // ... }); 

जैसा कि आप समझते हैं, हर जगह नहीं, इस तरह की चाल को क्रैंक करने का अवसर है। यदि कैनवस में कैनवस .toBlob विधि नहीं है (या इसे लागू नहीं किया जा सकता है), हम दूसरे तरीके से जाते हैं। यह उन ब्राउज़रों के लिए भी उपयुक्त है जो फॉर्मडाटा का समर्थन नहीं करते हैं।

इस पद्धति का सार अपने हाथों से एक मल्टीपार्ट अनुरोध करना और इसे सर्वर पर भेजना है। कैनवस के लिए, कोड इस तरह दिखेगा:

 var dataURL = canvas.toDataURL("image/png"); //    FileReader var base64 = dataURL.replace(/^data:[^,]+,/, ""); //   var binaryString = window.atob(base64); //  Base64 //    muptipart,   var uniq = '1234567890'; var data = [ '--_'+ uniq , 'Content-Disposition: form-data; name="my-file"; filename="hello-world.png"' , 'Content-Type: image/png' , '' , binaryString , '--_'+ uniq +'--' ].join('\r\n'); var xhr = new XMLHttpRequest; xhr.open('POST', '/upload', true); xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=_'+uniq); xhr.sendAsBinary(data); 

परिणामस्वरूप, विधि का जन्म हुआ:

 var xhr = ​FileAPI.upload({ url: '/upload', data: { foo: 'bar' }, headers: { 'Session-Id': '...' }, files: { images: imageFiles, others: otherFiles }, imageTransform: { maxWidth: 1024, maxHeight: 768 }, upload: function (xhr){}, progress: function (event, file){}, complete: function (err, xhr, file){}, fileupload: function (file, xhr){}, fileprogress: function (event, file){}, filecomplete: function (err, xhr, file){} });​ 

इसमें मापदंडों का एक समूह है, लेकिन मैं इमेजट्रांसफॉर्म पर विशेष ध्यान दूंगा। इसके माध्यम से, क्लाइंट पर छवियों के परिवर्तन के लिए जानकारी निर्धारित की जाती है। यह फ़्लैश के माध्यम से और HTML5 के माध्यम से दोनों काम करता है। लेकिन यह सब नहीं है: यह भी imageTransform कई हो सकता है:

 { huge: { maxWidth: 800, maxHeight: 600, rotate: 90 }, medium: { width: 320, height: 240, preview: true }, small: { width: 100, height: 120, preview: true } } 

यानी मूल के अलावा, सर्वर इसकी तीन प्रतियां भी ले जाएगा। क्यों? मेरी राय यह है: यदि आप सर्वर से क्लाइंट को लोड ट्रांसफर कर सकते हैं - तो करें। केवल आने वाले डेटा का न्यूनतम सत्यापन सर्वर पर रहना चाहिए।

इसके अलावा, अपलोड फ़ंक्शन एक xhr- आकार की वस्तु देता है, अर्थात। यह कुछ XMLHttpRequest गुणों और विधियों को लागू करता है, जैसे:

• स्टेटस - HTTP स्टेटस कोड
• statusText - HTTP स्टेटस टेक्स्ट
• responseText - सर्वर प्रतिक्रिया
• getResponseHeader (नाम) - सर्वर की प्रतिक्रिया हैडर प्राप्त करें
• getAllResponseHeaders () - सभी हेडर प्राप्त करें
• abort () - डाउनलोड रद्द करें

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

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

उपसंहार

अंत में, मैं आपको drag'n'drop का उपयोग करके फ़ाइलों को अपलोड करने का एक छोटा सा उदाहरण दिखाना चाहता हूं:

 <div id="el" class="dropzone"></div> <script> if( FileAPI.support.dnd ){ // ,     var el = document.getElementById("el"); //     Drag'n'Drop FileAPI.event.dnd(el, function (over){ //  ,    enter/leave   if( over ){ el.classList.add("dropzone_hover"); } else { el.classList.remove("dropzone_hover"); } }, function (dropFiles){ //    FileAPI.upload({ url: "/upload", files: { attaches: dropFiles }, complete: function (err, xhr){ if( !err ){ //   } } }); }); } </script> 

पुस्तकालय github, Bugreports पर है और पुल अनुरोधों का स्वागत है।

उपयोगी लिंक

- https://github.com/mailru/FileAPI ( डेमो )
- Mail.ru github (टारेंटूल, फेस्ट और अधिक)
- इनपुट [प्रकार = "फ़ाइल" कई]
- फ़ाइल एपीआई समर्थन
- फाइलर
- URL.createObjectURL , URL.revokeObjectURL
- XMLHttpRequest
- फॉर्मटाटा