अपलोड करने से पहले फ़ाइल का आकार प्राप्त करें


90

इनपुट फ़ाइल के परिवर्तन की घटना में AJAX / PHP का उपयोग करके फ़ाइल अपलोड करने से पहले फ़ाइल का आकार जानने का कोई तरीका है?


2
और स्पष्ट रूप से डुप्लिकेट की stackoverflow.com/search?q=file+size+before+upload
आपका कॉमन सेंस


यहाँ हो रही फ़ाइल नाम, प्रकार और आकार के कदम ट्यूटोरियल द्वारा एक कदम है codepedia.info/...
सिंह सतिंदर

जवाबों:


133

HTML bellow के लिए

<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);

});

निम्नलिखित धागा देखें:

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


1
क्या इंटरनेट एक्सप्लोरर (पुराने संस्करणों) पर फाइलें गैर-मौजूद नहीं हैं?
टिआगो सेसर ओलिवेरा

4
हां, यह IE 10 से पहले काम नहीं करता है और केवल एंड्रॉइड और आईओएस में आंशिक समर्थन है। caniuse.com/fileapi । यदि यह केवल इस आसान थे ...
styks

2
मुझे लगता है कि परिणाम बाइट्स में है?
एरडाल जी।

4
@ErdalG। अच्छा प्रश्न! MDN दस्तावेज़ीकरण को याद कर रहा है, लेकिन वस्तुओं FileList.filesकी एक सरणी-जैसा है File, जिसका विस्तार है Glob। और कल्पना के अनुसार , Globवास्तव में sizeसंपत्ति को बाइट्स की संख्या के रूप में परिभाषित करता है (एक खाली फ़ाइल के लिए 0)। तो हाँ, परिणाम बाइट्स में है
जॉन वीज़

14
<script type="text/javascript">
function AlertFilesize(){
    if(window.ActiveXObject){
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var filepath = document.getElementById('fileInput').value;
        var thefile = fso.getFile(filepath);
        var sizeinbytes = thefile.size;
    }else{
        var sizeinbytes = document.getElementById('fileInput').files[0].size;
    }

    var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
    fSize = sizeinbytes; i=0;while(fSize>900){fSize/=1024;i++;}

    alert((Math.round(fSize*100)/100)+' '+fSExt[i]);
}
</script>

<input id="fileInput" type="file" onchange="AlertFilesize();" />

IE और FF पर काम करें


15
डाउनवोट किया क्योंकि उत्तर ActiveX का उपयोग करता है। 2015 में, Microsoft ActiveX को भी छोड़ रहा है। जब यह दिया गया तो यह एक उचित सुझाव था, मैं डेवलपर्स को इससे और भविष्य में बचने की सलाह दूंगा।
स्कॉट स्टोन

3
मुझे यह समाधान पसंद है, क्योंकि IE के पुराने संस्करण केवल विंडो के लिए सही होंगे। ActiveXObject।
रॉब ब्राइडेकर

@scottstone मुझे समझ नहीं आ रहा है कि आपने विरासत ब्राउज़रों का समर्थन करने वाले सभी उत्तरों को क्यों वोट दिया? यह उत्तर ब्राउज़र फ़िंगरप्रिंट का उपयोग करने वाले लोगों की तुलना में बहुत साफ है और किसी भी तरह से किसी को भी ActiveX का उपयोग करने की अनुशंसा नहीं करता है।
निकोलस बूवरेट

@ निकोलस बाउवर्ट - मैं मानता हूं कि यह उत्तर दूसरों की तुलना में बहुत साफ है, लेकिन मैं इस बिंदु पर गिरावट को दूर नहीं कर सकता। मूल प्रश्न IE के पुराने संस्करणों के साथ संगतता के लिए नहीं पूछा था, और यह उत्तर पाठकों को सलाह नहीं देता है कि IE के 5+ वर्ष पुराने संस्करणों का समर्थन करने के लिए अधिकांश कोड है।
स्कॉट स्टोन

@scottstone वास्तव में ActiveX का उपयोग न करने के बारे में मेरे विचार से एक और मूर्त बिंदु है क्योंकि यह IE में एक चेतावनी संदेश प्रदर्शित करता है जो एक भयानक (डरावना?) उपयोगकर्ता अनुभव है।
निकोलस बुवरेट

13

अपलोड करने से पहले फ़ाइल का आकार प्राप्त करने का एक सरल उदाहरण है। जब भी सामग्री को जोड़ा जाता है या बदला जाता है, तो यह पता लगाने के लिए jQuery का उपयोग कर रहा है, लेकिन आप अभी भी files[0].sizejQuery का उपयोग किए बिना प्राप्त कर सकते हैं ।

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

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


8

मेरे पास एक ही समस्या थी और ऐसा लगता है कि हमारे पास एक सटीक समाधान नहीं है। आशा है कि यह अन्य लोगों की मदद कर सकता है।

समय की खोज करने के बाद, आखिरकार मुझे जवाब मिल गया। यह jQuery के साथ फ़ाइल संलग्न करने के लिए मेरा कोड है:

var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);

यह फ़ाइल आकार प्राप्त करने के लिए केवल उदाहरण कोड है। यदि आप अन्य सामान करना चाहते हैं, तो अपनी आवश्यकताओं को पूरा करने के लिए कोड को बदलने के लिए स्वतंत्र महसूस करें।


मुझे यह पसंद है क्योंकि इसे सबसे लोकप्रिय समाधान की तरह परिवर्तन की घटना पर डालने की आवश्यकता नहीं है। और मुझे यह भी पसंद है कि आपने मुझे मेरी ज़रूरतों को पूरा करने के लिए कोड बदलने की अनुमति दी है :)
मैट

8

सभी ब्राउज़रों पर काम करने वाला सर्वश्रेष्ठ समाधान;)

function GetFileSize(fileid) {
    try {
        var fileSize = 0;
        // for IE
        if(checkIE()) { //we could use this $.browser.msie but since it's deprecated, we'll use this function
            // before making an object of ActiveXObject, 
            // please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        // for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        alert("Uploaded File Size is" + fileSize + "MB");
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

से http://www.dotnet-tricks.com/Tutorial/jquery/HHLN180712-Get-file-size-before-upload-using-jquery.html

अद्यतन: हम इस फ़ंक्शन का उपयोग यह देखने के लिए करेंगे कि यह IE ब्राउज़र है या नहीं

function checkIE() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){  
        // If Internet Explorer, return version number
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    } else {
        // If another browser, return 0
        alert('otherbrowser');
    }

    return false;
}

3
डाउनवोट किया क्योंकि उत्तर ActiveX का उपयोग करता है। 2015 में, Microsoft ActiveX को भी छोड़ रहा है। जब यह दिया गया तो यह एक उचित सुझाव था, मैं डेवलपर्स को इससे और भविष्य में बचने की सलाह दूंगा। -
स्कॉट स्टोन

1
$ .browser को 1.9 संस्करण में jQuery से हटा दिया गया था (v 1.3 से हटा दिया गया था)।
सिल्वियो डेलगाडो

2
@scottstone यह बैकवर्ड कम्पैटिबिलिटी के लिए है और यह सच नहीं है कि Microsoft ActiveX को नहीं छोड़ेगा, यह बहुत सी चीजों में इस्तेमाल किया जाता है और यहाँ पर प्रूफ computerworld.com/article/2481188/internet/…
ucefkh

@SilvioDelgado को बदला गया और अपडेट किया गया कि उन्होंने $ .browser को एक प्लगइन में हटा दिया है, इसलिए हमें IE ब्राउज़र के लिए एक छोटे से परीक्षण की आवश्यकता होगी (सभी संस्करणों के साथ काम करता है)
ucefkh

4

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>


3

HTML5 समर्थन वाले ब्राउज़रों के पास इनपुट प्रकार के लिए फ़ाइल गुण हैं। यह निश्चित रूप से पुराने IE संस्करणों में काम नहीं करेगा।

var inpFiles = document.getElementById('#fileID');
for (var i = 0; i < inpFiles.files.length; ++i) {
    var size = inpFiles.files.item(i).size;
    alert("File Size : " + size);
}

2

ucefkh के समाधान ने सबसे अच्छा काम किया, लेकिन क्योंकि $ .browser को jQuery 1.91 में पदावनत कर दिया गया था, को navigator.userAgent का उपयोग करने के लिए बदलना पड़ा:

function IsFileSizeOk(fileid) {
    try {
        var fileSize = 0;
        //for IE
        if (navigator.userAgent.match(/msie/i)) {
            //before making an object of ActiveXObject, 
            //please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        //for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        return (fileSize < 2.0);
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

1

आपको फ़ाइलें प्राप्त करने के लिए एक AJAX HEAD अनुरोध करने की आवश्यकता है। jquery के साथ यह कुछ ऐसा है

  var req = $.ajax({
    type: "HEAD",
    url: yoururl,
    success: function () {
      alert("Size is " + request.getResponseHeader("Content-Length"));
    }
  });

लेकिन अगर उस फ़ाइल इनपुट स्पष्ट हो जाएगा (खाली) ?? क्या आप एक उदाहरण दे सकते हैं धन्यवाद
DeLe

1

कृपया इसका उपयोग न करें ActiveXक्योंकि संभावना है कि यह इंटरनेट एक्सप्लोरर में एक डरावना चेतावनी संदेश प्रदर्शित करेगा और आपके उपयोगकर्ताओं को डरा देगा।

ActiveX चेतावनी

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

function getFileSize(fileInputElement){
    if (!fileInputElement.value ||
        typeof fileInputElement.files === 'undefined' ||
        typeof fileInputElement.files[0] === 'undefined' ||
        typeof fileInputElement.files[0].size !== 'number'
    ) {
        // File size is undefined.
        return undefined;
    }

    return fileInputElement.files[0].size;
}

0

आप PHP filesize फ़ंक्शन का उपयोग कर सकते हैं। Ajax का उपयोग करते हुए अपलोड करने के दौरान, कृपया फ़ाइल को चेक करने वाले मान को php स्क्रिप्ट में ajax अनुरोध करने और मान को वापस करने के लिए पहले फ़ाइल की जाँच करें।


0

आप HTML5 फ़ाइल API का उपयोग करके कर सकते हैं: http://www.html5rocks.com/en/tutorials/file/dndfiles/

हालाँकि आपको पुराने ब्राउज़रों के लिए हमेशा PHP (या किसी अन्य बैकएंड भाषा का उपयोग करना) के लिए कमबैक करना चाहिए।


0

व्यक्तिगत रूप से, मैं कहूंगा कि वेब वर्ल्ड का जवाब आज का सबसे अच्छा है, जिसे HTML मानक दिए गए हैं। यदि आपको IE <10 का समर्थन करने की आवश्यकता है, तो आपको कुछ प्रकार के ActiveX का उपयोग करने की आवश्यकता होगी। मैं उन सिफारिशों से बचना चाहूंगा जिनमें स्क्रिप्टिंग के खिलाफ कोडिंग शामिल है। FileSystemObject, या सीधे ActiveX को तत्काल सक्रिय करना।

इस मामले में, मुझे 3 पार्टी जेएस पुस्तकालयों जैसे कि प्लूपलोड का उपयोग करने में सफलता मिली है, जिसे ब्राउज़ करने के लिए एचटीएमएल 5 एपिस या फ्लैश / सिल्वरलाइट नियंत्रण का उपयोग करने के लिए कॉन्फ़िगर किया जा सकता है जो उन का समर्थन नहीं करते हैं। Plupload में फ़ाइल आकार की जाँच करने के लिए क्लाइंट साइड API है जो IE <10 में काम करता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.