ExtJS: फ़ाइलों को बहु-लोड और मान्य करने का एक आसान तरीका (HTML5 फ़ाइल API का उपयोग करें)

यदि आपको न केवल सर्वर पर, बल्कि क्लाइंट पर भी उपयोगकर्ता-डाउनलोड की गई फ़ाइलों को मान्य करने की आवश्यकता है, या यदि आप उपयोगकर्ता को एक साथ (एकाधिक = "एकाधिक") अपलोड करने के लिए कई फ़ाइलों का चयन करने की अनुमति देना चाहते हैं, तो सबसे अधिक संभावना है कि आप एक्सट्रीम का उपयोग करते समय कुछ कठिनाइयों का सामना करेंगे। .field.File।

समस्या का सार

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

Ext.apply(Ext.form.field.VTypes, { file: function(val, field) { var types = ['rtf', 'pdf', 'doc'], ext = val.substring(val.lastIndexOf('.') + 1); if(Ext.Array.indexOf(types, ext) === -1) { return false; } return true; } ,fileText: 'Invalid file' }); 

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

 var input = Ext.get(field.id+'-fileInputEl'); -      input.files. 

अगर किसी को समझ में नहीं आता है, तो वेनिला के ऊपर की रेखा। इस तरह से ध्वनि होगी:

 var input = document.getElementById(field.id+'-fileInputEl'); 

वेनिला ने शायद कुछ मैचों को बचाया होगा, लेकिन जब दलिया शुरू होता है तो मुझे वास्तव में पसंद नहीं होता है, और मेरे शरीर को काम में अंतर महसूस नहीं होता है।

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

1. जब आप कई फ़ाइलों (कुछ जोड़तोड़ के बाद) का चयन करते हैं, तो फॉर्म पर फ़ील्ड आपको केवल पहली चयनित फ़ाइल दिखाएगा।
2. यदि आप एक मूल इनपुट चाहते हैं, तो इसका आकार विशेषता 1 होगा, इनपुट टाइप करने के बाद: फ़ील्ड कॉन्फ़िगरेशन में 'फ़ाइल', और आकार सेट करना: 50 संपत्ति आपकी मदद नहीं करेगी।

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

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

निर्णय

यदि आप Google, इंटरनेट, ज्यादातर मामलों में, आपको केवल सर्वर पर फ़ाइलों को मान्य करने या फ्लैश का उपयोग करने की सलाह देंगे। यदि आप चाहते हैं और कर सकते हैं - आप ऐसा कर सकते हैं। मैंने ux को भी देखा, जो बहुत सारी फ़ाइलों को लोड कर सकता है और उन्हें मान्य कर सकता है - यह एक विकल्प भी हो सकता है।

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

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

हम क्षेत्र का वर्णन करते हैं:

  Ext.define('fileupload',{ extend: 'Ext.form.field.Text' ,alias: 'widget.fileupload' //     xtype: 'fileupload' ,inputType: 'file' ,listeners: { render: function (me, eOpts) { var el = Ext.get(me.id+'-inputEl'); el.set({ size: me.inputSize || 1 }); if(me.multiple) { el.set({ multiple: 'multiple' }); } } } }); 

अगर कुछ स्पष्टीकरण की आवश्यकता है, तो मुझे यह भी पता नहीं है। यदि संक्षेप में - मूल इनपुट के "ड्राइंग" के बाद, आकार विशेषता इसके लिए सेट की जाती है (कॉन्फ़िगरेशन के दौरान या डिफ़ॉल्ट रूप से सेट - 1) और एकाधिक विशेषता यदि यह कॉन्फ़िगरेशन में सेट है। तो अब हमारे पास एक देशी विन्यास योग्य इनपुट है।

हम सत्यापनकर्ता का वर्णन करते हैं:

  Ext.apply(Ext.form.field.VTypes, { file: function(val, field) { var input, files, file ,acceptSize = field.acceptSize || 4096 //    ,acceptMimes = field.acceptMimes || ['rtf', 'pdf', 'doc', 'xls', 'xlsx', 'zip', 'rar']; //   input = Ext.get(field.id+'-inputEl'); files = input.getAttribute('files'); if ( ! files || ! window.FileReader) { return true; //      .      false } for(var i = 0, l = files.length; i < l; i++) { //    file = files[i]; if(file.size > acceptSize * 1024) { this.fileText = (file.size / 1048576).toFixed(1) + ' MB: invalid file size ('+(acceptSize / 1024).toFixed(1)+' MB max)'; return false; } var ext = file.name.substring(file.name.lastIndexOf('.') + 1); if(Ext.Array.indexOf(acceptMimes, ext) === -1) { //    this.fileText = 'Invalid file type ('+ext+')'; return false; } } return true; } }); 

यहां, मुझे लगता है, सब कुछ भी काफी स्पष्ट है। बस डिफ़ॉल्ट फ़ाइल प्रकार / आकार सेट करें, इनपुट प्राप्त करें और इसकी फ़ाइलों पर जाएं - उनके प्रकार / आकार की जांच करें। सब कुछ बहुत सरल है।

अब हम प्रपत्र फ़ील्ड का वर्णन करते हुए फ़ाइलों को लोड और मान्य कर सकते हैं:

  { xtype: 'fileupload' ,vtype: 'file' ,multiple: true //     ,acceptMimes: ['doc', 'xls', 'xlsx', 'pdf', 'zip', 'rar'] //    ,acceptSize: 2048 //   ,inputSize: 76 //  size ,fieldLabel: 'File <span class="gray">(doc, xls, xlsx, pdf, zip, rar; 2 MB max)</span>' ,msgTarget: 'under' ,name: 'filesToUpload[]' } 

कार्रवाई में, यह सारी अर्थव्यवस्था यहां देखी जा सकती है - सब कुछ स्पष्टता के लिए एक फाइल में एकत्र किया जाता है, हालांकि सामान्य तौर पर मुझे एमवीटीएस 4 एक्स से प्यार है।