एचटीएमएल 5, मल्टीपलोड में इनपुट तत्व

एचटीएमएल 5 में इनपुट तत्व की एक विशेषता है, जिसके साथ हम अपलोड करने के लिए कई फ़ाइलों का चयन कर सकते हैं। यह विशेषता केवल एक "एकाधिक" मान को स्वीकार करती है, यह इस तरह दिखेगा:

<input type="file" multiple="multiple" name="files[]" /> 

नाम पर ध्यान दें, हमने स्पष्ट रूप से इसमें संकेत दिया है कि यह एक सरणी है।

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

 <input type="file" multiple="multiple" name="files[]" accept="image" /> 

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

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

आवश्यक विशेषता स्ट्रिंग को "आवश्यक" स्वीकार करती है, और आवश्यक फ़ील्ड बनाती है।

 <input type="file" multiple="multiple" name="files[]" accept="image" required="required" title="    " /> 

यह कैसे काम करेगा, जब आप खाली इनपुट के साथ फॉर्म जमा करने का प्रयास करते हैं, तो निम्न पाठ के साथ एक त्रुटि चेतावनी दिखाई देगी:

फ़ायरफ़ॉक्स:

क्रोम:

ओपेरा:


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

हमारे पास अभी भी कई समस्याएं हैं जिन्हें उपयोगकर्ता की सुविधा के लिए हल किया जाना चाहिए।

• फ़ाइल प्रकार फिर से जांचें
• फ़ाइल का आकार
• फाइलों की संख्या

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

 var inputFile = document.getElementById('input').files; //   FileList : { 0, 1, 2, length: 3, item } 

जहां 0,1,2 डाउनलोड की गई फ़ाइलों की कुंजी हैं।
लंबाई, फाइलों की संख्या।
आइटम () विधि फ़ाइल कुंजी को स्वीकार करती है।

किसी फ़ाइल तक पहुँचने के दो तरीके हैं:

 //   var file = inputFile[0]; //  var file = inputFile.item(0); 

फ़ाइल चर में फ़ाइल ऑब्जेक्ट होगा:

 File : { constructor: File {...}, fileName: 'image.png', //   fileSize: 879394, //   name: 'image.png', //   size: 879394, //   type: 'image/png', // MIME   getAsBinary, getAsDataURL, getAsText, lastModifiedDate: 'Thu May 26 2001 21:34:48 GMT+0300 (Eastern Europe Daylight Time)' } 

ओपेरा में फाइलसिलेज, फाइलनाम नहीं है, लेकिन इसका नाम और आकार है। क्रोम, फ़ायरफ़ॉक्स, सफारी में सभी चार गुण हैं।
Chrome के पास केवल LastModifiedDate गुण है।

हम तीन तरीकों पर ध्यान केंद्रित करते हैं।

• getAsBinary: फ़ाइल का स्रोत कोड प्राप्त करें।
• getAsDataURL: डेटा को आधार 64 में परिवर्तित करें
• getAsText: यहाँ मैं पश्चाताप करता हूँ, अभी भी यह पता नहीं लगा पाया है कि यह क्या है, और यदि आप मुझे समझाते हैं तो मैं बहुत आभारी रहूँगा।

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

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

संसाधन जिसने मुझे नई इनपुट सुविधाओं के बारे में उपरोक्त जानने और समझने में मदद की।