एचटीएमएल 5 का उपयोग करके ग्राहक की जाँच फ़ाइल आकार?

84

मैं HTML5 लहर की सवारी करने की कोशिश कर रहा हूं, लेकिन मैं एक छोटी सी समस्या का सामना कर रहा हूं। एचटीएमएल 5 से पहले हम फ़ाइल का आकार फ्लैश के साथ जांच रहे थे, लेकिन अब वेब एप्लिकेशन में फ्लैश का उपयोग करने से बचना है। HTML5 का उपयोग करके क्लाइंट पक्ष में फ़ाइल आकार की जांच करने का कोई तरीका है?

javascript html file-upload

— खालिद मुसाईद
स्रोत

126

यह काम। इनपुट में बदलाव होने पर इसे एक इवेंट श्रोता के अंदर रखें।

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // check file size
}

— अब्दुल्ला जिबली
स्रोत

यह IE 10, मोज़िला एफएफएक्स और क्रोम में मेरे लिए काम करता है। धन्यवाद!

— रहनुज़ो

ठीक काम करता है, आप इसे सही ढंग से उपयोग नहीं कर रहे हैं; इनपुट के ऑनकॉन्ग इवेंट में लॉग ऑन करें और आप ठीक हो जाएंगे।

— डंडविस

@dandavis मैं उत्तर में कोड का उपयोग कर रहा हूं। यदि कोड ठीक काम करता है, तो मुझे इसे बदलने की आवश्यकता क्यों है?

— चक ले बट

1

@ अपने उदाहरण पर काम न करें क्योंकि आप किसी फ़ाइल का चयन करने से पहले पेज लोड पर फ़ाइल सूची को पढ़ने की कोशिश करते हैं।

— अनुमानित

1

@ चक: ठीक है, यह ठीक काम करता है, और आपने इसे ठीक किया है, लेकिन यह अकेले पर्याप्त नहीं है। यदि आपने फ़ाइल को पॉप्युलेट करने के बाद इसे कंसोल में चलाया है, तो आप इसे ठीक काम करते हुए देखेंगे। ऐप्स के लिए, कंसोल अच्छा नहीं है, इसलिए आपको इनपुट को आबादी के बाद चलने वाली घटना में कोड डालना चाहिए, इसलिए यह अपेक्षा के अनुरूप काम करेगा। गलतफहमी के लिए खेद है।

— डंडविस

33

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

document.getElementById('fileInput').onchange = function(){
    var filesize = document.getElementById('fileInput').files[0].size;
    console.log(filesize);    
}

यदि आप jQuery लाइब्रेरी का उपयोग कर रहे हैं तो निम्न कोड काम आ सकता है

$('#fileInput').on('change',function(){
  if($(this).get(0).files.length > 0){ // only if a file is selected
    var fileSize = $(this).get(0).files[0].size;
    console.log(fileSize);
  }
});

यह देखते हुए कि फ़ाइल का रूपांतरण यह प्रदर्शित करने के लिए कि कभी मीट्रिक आपके ऊपर है।

— Ammadu
स्रोत

आपका jQuery का उदाहरण काम नहीं करता है। आप के साथ jQuery का उपयोग करने में सक्षम होने के लिए प्रकट नहीं होता है .files: jsfiddle.net/edxvo4wa (मैं खुद को पता चला जब मैं एक समाधान के साथ आ रहा था - यह काम करता है अगर आप इसे बदलते हैं document.getElementById)।

— चक ले बट

1

@ वहाँ त्रुटि के लिए खेद है, मैंने काम करने के साथ अपना जवाब अपडेट किया है

— अम्मादु

7

HTML5 fie api फ़ाइल का आकार जाँचने के लिए समर्थन करता है।

फ़ाइल एपीआई के बारे में अधिक जानकारी प्राप्त करने के लिए इस लेख को पढ़ें

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="fileInput" />


var size = document.getElementById("fileInput").files[0].size;

इसी तरह फ़ाइल एपीआई नाम और प्रकार देता है।

— कोंगा राजू
स्रोत

3

व्यक्तिगत रूप से, मैं इस प्रारूप का विकल्प चुनूंगा:

    $('#inputFile').bind('change', function(e) {
      var data = e.originalEvent.target.files[0];
      // and then ...
      console.log(data.size + "is my file's size");
      // or something more useful ...
      if(data.size < 500000) {
        // what your < 500kb file will do
      }
    }

— अलेक्जेंडर लियोन
स्रोत

1

मेरा मानना है कि 500kb वास्तव में 500 * 1024 होगा। कोई बड़ी बात नहीं है, लेकिन 500,000b फाइल वाली अंतिम उपयोगकर्ता इसे 488kb के रूप में देखेगी और इनकार कर दिया। और यहाँ से शुरू होता है बड़ी हताशा

— अपोलो

2

"इसे प्राप्त करने के लिए कोई सरल, क्रॉस-ब्राउज़र समाधान नहीं है": ग्राहक की तरफ फ़ाइल अपलोड आकार का पता लगाना?

— जुलिएन
स्रोत

10

सर्वर आकार सत्यापन को भी जोड़ें, लेकिन आप आधुनिक ब्राउज़रों के दर्द को बचाने के साथ-साथ क्लाइंट पक्ष की भी जाँच कर सकते हैं।

— एल योबो