JQuery के साथ फ़ाइल इनपुट आकार कैसे जांचें?

135

मेरे पास फ़ाइल अपलोड क्षमताओं के साथ एक फॉर्म है और मैं कुछ अच्छी क्लाइंट साइड त्रुटि की रिपोर्ट करने में सक्षम होना चाहूंगा अगर उपयोगकर्ता जिस फ़ाइल को अपलोड करने का प्रयास कर रहा है वह बहुत बड़ी है, क्या jQuery के साथ फ़ाइल आकार के खिलाफ जांच करने का एक तरीका है, या तो पूरी तरह से। क्लाइंट पर या किसी तरह फाइल को सर्वर पर वापस जाँचने के लिए पोस्ट करना?

javascript jquery file-upload

— सर्व-कुंची
स्रोत

275

आपके पास वास्तव में फाइल सिस्टम तक पहुंच नहीं है (उदाहरण के लिए स्थानीय फ़ाइलों को पढ़ने और लिखने के लिए), हालांकि, एचटीएमएल 5 फ़ाइल एपी विनिर्देश के कारण, कुछ फ़ाइल गुण हैं जिनकी आपके पास पहुंच है, और फ़ाइल का आकार उनमें से एक है।

नीचे HTML के लिए

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

निम्नलिखित प्रयास करें:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

जैसा कि यह HTML5 विनिर्देश का एक हिस्सा है, यह केवल आधुनिक ब्राउज़रों (IE के लिए आवश्यक v10) के लिए काम करेगा और मैंने यहां अन्य विवरणों और लिंक को जोड़ा है जो आपको पता होनी चाहिए: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt-जाँच--फ़ाइल-आकार /

पुराने ब्राउज़र समर्थन करते हैं

ज्ञात हो कि पुराने ब्राउज़र nullपिछली this.filesकॉल के लिए एक मान लौटाएंगे , इसलिए एक्सेस this.files[0]करना एक अपवाद होगा और आपको इसका उपयोग करने से पहले फ़ाइल API समर्थन की जांच करनी चाहिए

— फेलिप सबिनो
स्रोत

6

हर कोई कहता है कि यह नहीं किया जा सकता है - फिर भी यहाँ है। यह काम। मैंने इसका परीक्षण किया।

— पीटर

35

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

— फेलिप सबिनो

3

मैं अभी Google पर इस उत्तर पर आया हूं और इसका उपयोग उन फ़ाइलों को पोस्ट करने से रोकने के लिए करने जा रहा हूं जो किसी दिए गए आकार से अधिक हैं; के रूप में मैं भी सर्वर की ओर फ़ाइल आकार की जाँच करें मैं एक क्लाइंट साइड समाधान है जो IE8 में काम नहीं करता है खुश हूँ।

— स्टीव विल्केस

2

@GaolaiPeng यह त्रुटि शायद इसलिए है क्योंकि jQueryजावास्क्रिप्ट फ़ाइल को जोड़ा नहीं गया था (या इसे ठीक से लोड नहीं किया गया था)। क्या आपने इसे headअपने पेज के पेज में जोड़ा है ?

— फेलिप सबिनो

1

@volumeone यही कारण है कि मैंने कहा कि आपको "इसका उपयोग करने से पहले फ़ाइल एपीआई समर्थन की जांच करनी चाहिए" मेरे उत्तर में और फिर आप तदनुसार यूआई बदल सकते हैं।

— फेलिप सबिनो

41

यदि आप validateइस विधि को बनाकर jQuery का उपयोग करना चाहते हैं :

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (en bytes) 
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param) 
});

आप इसका उपयोग करेंगे:

$('#formid').validate({
    rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576  }},
    messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});

— नौसे गोल्डन
स्रोत

1

@ हाँ, फ़ाइल आकार गुण HTML5 विनिर्देश का एक हिस्सा है, इसलिए यह केवल आधुनिक ब्राउज़रों के लिए काम करेगा (IE के लिए यह संस्करण 10+ होगा)

— फेलिप सबिनो

7

आपने गलत तरीके से acceptनियम का उपयोग किया है , जहाँ आपको extensionनियम का उपयोग करना चाहिए था। ~ नियम केवल प्रकारों के लिए है। नियम फ़ाइल एक्सटेंशन के लिए है। आपको इन नियमों के लिए फ़ाइल को भी शामिल करना होगा । acceptextensionadditional-methods.js

— स्पार्की

@ स्पार्की की मुखर टिप्पणी पर

$('#formid').validate({     rules: { inputimage: { required: true, extension: "png|jpe?g|gif", filesize: 1048576  }},     messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" } });

— अमल करते हुए

26

यह कोड:

$("#yourFileInput")[0].files[0].size;

प्रपत्र इनपुट के लिए फ़ाइल का आकार देता है।

FF 3.6 पर और बाद में यह कोड होना चाहिए:

$("#yourFileInput")[0].files[0].fileSize;

— jeferod83
स्रोत

2

आपका मुट्ठी कोड क्रोम में काम करता है लेकिन दूसरा फायरफॉक्स नवीनतम के लिए काम नहीं करता है।

— डेबोरा

वह दूसरा कोड वह है जो मुझे सभी आधुनिक (2014+ ब्राउज़र) के लिए उपयोग करना था।

— ड्रीमकास्टिंग

1

पहला कोड IE 10, 11, एज, क्रोम, सफारी (विंडोज संस्करण), बहादुर और फ़ायरफ़ॉक्स काम करता है।

— मशुकुर रहमान

12

मैं अपना समाधान भी पोस्ट कर रहा हूं, जिसका उपयोग ASP.NET FileUploadनियंत्रण के लिए किया जाता है । शायद किसी को यह उपयोगी लगेगा।

    $(function () {        
    $('<%= fileUploadCV.ClientID %>').change(function () {

        //because this is single file upload I use only first index
        var f = this.files[0]

        //here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes)
        if (f.size > 8388608 || f.fileSize > 8388608)
        {
           //show an alert to the user
           alert("Allowed file size exceeded. (Max. 8 MB)")

           //reset file upload control
           this.value = null;
        }
    })
});

— बेसनिक कस्त्रती
स्रोत

1

आपको मूल्य को शून्य करने की आवश्यकता है f = this.files[0]या पुराने ब्राउज़रों पर यह विफल हो जाएगा। जैसेif (f && (f.size > 8388608 || f.fileSize > 8388608))

— कोडिंग

9

फ़ाइल का आकार जाँचने के लिए नीचे का उपयोग करें और यदि यह अधिक है तो साफ़ करें,

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });

— उमेश पाटिल
स्रोत

1

का उपयोग करना चाहिए $ (यह) .val (शून्य); अन्यथा फार्म उचित लगाव का चयन किए बिना सही ढंग से प्रस्तुत नहीं करता है।

— केविन ग्रैबेर

1

आप इस प्रकार की जाँच फ़्लैश या सिल्वरलाइट से कर सकते हैं लेकिन जावास्क्रिप्ट के साथ नहीं। जावास्क्रिप्ट सैंडबॉक्स फ़ाइल सिस्टम तक पहुंच की अनुमति नहीं देता है। अपलोड होने के बाद आकार की जांच सर्वर साइड से करनी होगी।

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

— केल्सी
स्रोत

1

<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
</form>
<button onclick="checkSize();"></button>
<script>
    function checkSize(){
        var size = $('#uploadForm')["0"].firstChild.files["0"].size;
        console.log(size);
    }
</script>

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

टिप्पणियाँ:

var size = $('#uploadForm')["0"]["0"].files["0"].size;

यह काम करता था, लेकिन यह अब क्रोम में नहीं है, मैंने ऊपर दिए गए कोड का परीक्षण किया और यह ff और क्रोम (सबसे अंतिम) दोनों में काम किया। दूसरा ["0"] अब फर्स्ट चाइल्ड है।

— डिलन बर्नेट
स्रोत

0

यह प्रयास करें:

var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;

if (sizeInKB >= sizeLimit) {
    alert("Max file size 30KB");
    return false;
}

— बबलू अहमद
स्रोत