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

लंबे समय तक मैंने फ़ाइलों को डाउनलोड करने के लिए एक मॉड्यूल लिखा था और यह सब आदर्श नहीं था। और फिर मैंने सोचा, अगर मैं अब प्रकाशित नहीं होता, तो मैं कभी प्रकाशित नहीं होता, आदर्श प्राप्य नहीं है!

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

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

प्रत्येक फ़ाइल को एक अलग अनुरोध में डाउनलोड करें। किसी भी होस्टिंग पर, POST अनुरोध के अधिकतम आकार (जैसे 10 एमबी) की सीमा होती है। यदि हम एक ही समय में 10 फाइलें लोड करते हैं, तो उनका कुल वजन 10 एमबी से अधिक नहीं होना चाहिए। 99% मामलों में, प्रदर्शन को त्यागना आसान है और इस तरह के प्रतिबंधों की समस्या नहीं है।

कोई विलंबित डाउनलोड नहीं। नहीं - फ़ाइल (में नहीं 2000, चाय, लाइव) के अलावा के बाद तुरंत लोड किया जाना चाहिए, इसलिए वहाँ कतार के साथ काम करने के लिए कोई तरीके हैं - 5 टुकड़े के लिए चुना फ़ाइलों का चयन, एक को हटाने, "भेजें" पर क्लिक करें। लेकिन डाउनलोड को रद्द करना होगा।

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

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

मॉड्यूल सुविधाएँ

• Xhr और iframe के माध्यम से फ़ाइलें डाउनलोड करें (पुराने ब्राउज़र के लिए)
• सर्वर पर अपलोड करने से पहले छवियों को पढ़ना (यदि ब्राउज़र FileReader का समर्थन करता है)
• जैसा कि ऊपर बताया गया है, बटन और ड्रैग एरिया के लिए एक निर्देश।
• अंतर्निहित सत्यापनकर्ता, जिसे यदि वांछित है, तो अपने स्वयं के साथ बदला जा सकता है।
• अंतर्निहित त्रुटि हैंडलिंग फ़ंक्शन, जिसे आपके स्वयं के साथ भी बदला जा सकता है।
• एक साथ अपलोड की गई फ़ाइलों के लिए समग्र प्रगति।

भविष्य की योजना (आपकी मदद से ;-)

• एक साथ डाउनलोड की गई फ़ाइलों की संख्या को सीमित करें
• क्लाइंट पर चित्र को कम करना
• Webcam
• पुराने ब्राउज़रों के लिए डॉकिंग डाउनलोडर
• रिफैक्टरिंग

संबंध

मॉड्यूल कनेक्शन:

angular.module('myApp', ['oi.file']); 

HTML टेम्पलेट में निर्देश का उपयोग करना:

 <!--      --> <input type="file" oi-file="options"> <!--     --> <ul oi-file="options"> <li ng-repeat="item in items"> <img ng-src="{{item.thumb}}"> </li> </ul> 

नियंत्रक में सेटिंग:

 $scope.file = {} // $scope.options = { //     change: function (file) { // file     //   file.$upload('uploader.php', $scope.file) }) } } 

प्रत्येक फ़ाइल के लिए एक मॉडल तत्व बनाना:

 $scope.items = model; $scope.options = { change: function (file) { //      $scope.add(function (i, id) { //   FileReader     file.$preview($scope.items[i]); //   file.$upload('uploader.php' + id, $scope.items[i], {allowedType: ["jpeg", "jpg", "png"]}) .catch(function (data) { //     $scope.del(data.item.id); }) }) } } + आईडी, $ scope.items [i], {allowedType: [ "jpeg", "jpg", "png"]}) $scope.items = model; $scope.options = { change: function (file) { //      $scope.add(function (i, id) { //   FileReader     file.$preview($scope.items[i]); //   file.$upload('uploader.php' + id, $scope.items[i], {allowedType: ["jpeg", "jpg", "png"]}) .catch(function (data) { //     $scope.del(data.item.id); }) }) } } 

catch विधि कोणीय 1.2 से शुरू होती है। पुराने संस्करणों में, इसके बजाय then(null, function (data) {...}) उपयोग करें। $preview और $upload वापसी के वादे। $ Q देखें।

ग्राहक पर छवि में कमी के साथ उदाहरण:

 file.$preview({}) .then(function (data) { // .     canvas minimize(file._file); // file.$upload('uploader.php', $scope.avatar) }, function (data) { //  .    file.$upload('uploader.php', $scope.avatar) }); 

स्रोत, डेमो

जीथब , डेमो , सैंडबॉक्स

एनालॉग

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