ดูขนาดไฟล์ก่อนอัปโหลด


92

มีวิธีใดในการค้นหาขนาดไฟล์ก่อนที่จะอัปโหลดไฟล์โดยใช้ AJAX / PHP ในการเปลี่ยนแปลงของไฟล์อินพุต


2
และเห็นได้ชัดว่าซ้ำกันของstackoverflow.com/search?q=file+size+before+upload
สามัญสำนึกของคุณ

1
อาจซ้ำกันได้ของHow to check file input size with jQuery?
L84

นี่คือคำแนะนำทีละขั้นตอนในการตั้งชื่อไฟล์ประเภทและขนาดcodepedia.info/…
Satinder singh

คำตอบ:


134

สำหรับการร้อง 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);

});

ดูหัวข้อต่อไปนี้:

จะตรวจสอบขนาดไฟล์เข้าด้วย jQuery ได้อย่างไร?


1
ไฟล์อาร์เรย์ไม่มีอยู่ใน Internet Explorer (เวอร์ชันเก่ากว่า) ใช่หรือไม่
Tiago César Oliveira

4
ใช่สิ่งนี้ใช้ไม่ได้กับ IE 10 ก่อนหน้าและมีการรองรับบางส่วนใน Android และ ios เท่านั้น caniuse.com/fileapi ถ้ามันง่ายแค่นี้ ...
สไตล์

2
ฉันคิดว่าผลลัพธ์เป็นไบต์?
Erdal G.

4
@ErdalG. คำถามที่ดี! MDN ไม่มีเอกสารประกอบ แต่FileList.filesเป็นเหมือนอาร์เรย์ของFileวัตถุซึ่งเป็นส่วนขยายของGlob. และเป็นไปตามสเปค , Globแน่นอนกำหนดsizeสถานที่ให้บริการเป็นจำนวนไบต์ (0 สำหรับไฟล์ที่ว่างเปล่า) ดังนั้นใช่ผลที่ได้คือไบต์
John Weisz

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 แม้ว่าจะเป็นข้อเสนอแนะที่สมเหตุสมผล แต่ฉันขอแนะนำให้นักพัฒนาซอฟต์แวร์หลีกเลี่ยงสิ่งนี้ในปัจจุบันและอนาคต
scott stone

3
ฉันชอบโซลูชันนี้เพราะ IE เวอร์ชันเก่าเท่านั้นที่จะคืนค่า true สำหรับ window.ActiveXObject
Rob Breidecker

@scottstone ฉันไม่เข้าใจว่าทำไมคุณถึงโหวตคำตอบทั้งหมดที่สนับสนุนเบราว์เซอร์เดิม? คำตอบนี้สะอาดกว่าคำตอบที่ใช้ลายนิ้วมือของเบราว์เซอร์และไม่แนะนำให้ใครใช้ ActiveX
Nicolas Bouvrette

@NicolasBouvrette - ฉันยอมรับว่าคำตอบนี้สะอาดกว่าคำตอบอื่น ๆ มาก แต่ฉันไม่สามารถลบการโหวตลงได้ในตอนนี้ คำถามเดิมไม่ได้ถามถึงความเข้ากันได้กับ IE เวอร์ชันเก่าและคำตอบนี้ไม่ได้แนะนำให้ผู้อ่านทราบว่าโค้ดส่วนใหญ่มีเพื่อรองรับ IE เวอร์ชันเก่า 5 ปีขึ้นไป
scott stone

@scottstone จริงๆแล้วอีกหนึ่งประเด็นที่จับต้องได้จากมุมมองของฉันว่าทำไมไม่ใช้ ActiveX เพราะมันแสดงข้อความเตือนใน IE ซึ่งเป็นประสบการณ์การใช้งานที่น่ากลัว (น่ากลัว?)
Nicolas Bouvrette

13

นี่คือตัวอย่างง่ายๆในการรับขนาดของไฟล์ก่อนอัปโหลด ใช้ jQuery เพื่อตรวจจับเมื่อใดก็ตามที่มีการเพิ่มหรือเปลี่ยนแปลงเนื้อหา แต่คุณยังสามารถรับได้files[0].sizeโดยไม่ต้องใช้ jQuery

$(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>

นี่คือตัวอย่างที่สมบูรณ์ยิ่งขึ้นซึ่งเป็นหลักฐานเกี่ยวกับรหัสแนวคิดในการลากและวางไฟล์ลงใน FormDataและอัปโหลดผ่าน POST ไปยังเซิร์ฟเวอร์ รวมถึงการตรวจสอบขนาดไฟล์อย่างง่าย


9

ฉันมีปัญหาเดียวกันและดูเหมือนว่าเราไม่มีวิธีแก้ปัญหาที่ถูกต้อง หวังว่านี่จะช่วยคนอื่นได้

หลังจากใช้เวลาสำรวจรอบ ๆ ในที่สุดฉันก็พบคำตอบ นี่คือรหัสของฉันเพื่อรับไฟล์แนบด้วย jQuery:

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

นี่เป็นเพียงตัวอย่างโค้ดสำหรับการรับขนาดไฟล์ หากคุณต้องการทำอย่างอื่นอย่าลังเลที่จะเปลี่ยนรหัสเพื่อตอบสนองความต้องการของคุณ


ฉันชอบอันนี้เพราะมันไม่จำเป็นต้องใส่ในเหตุการณ์การเปลี่ยนแปลงเหมือนวิธีแก้ปัญหาที่ได้รับความนิยมมากที่สุด และฉันยังชอบความจริงที่คุณมีให้ฉันอนุญาตให้เปลี่ยนรหัสเพื่อตอบสนองความต้องการของฉัน :)
แมตต์

9

ทางออกที่ดีที่สุดสำหรับทุกเบราว์เซอร์;)

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

UPDATE: เราจะใช้ฟังก์ชั่นนี้เพื่อตรวจสอบว่าเป็นเบราว์เซอร์ 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 แม้ว่าจะเป็นข้อเสนอแนะที่สมเหตุสมผล แต่ฉันขอแนะนำให้นักพัฒนาซอฟต์แวร์หลีกเลี่ยงสิ่งนี้ในตอนนี้และในอนาคต -
scott stone

1
$ .browser ถูกลบออกจาก jQuery ในเวอร์ชัน 1.9 (เลิกใช้งานตั้งแต่ v 1.3)
Silvio Delgado

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

แต่ถ้าใส่ไฟล์นั้นจะเคลียร์ (ว่างเปล่า) ?? คุณช่วยยกตัวอย่างได้
ไหม

1

โปรดอย่าใช้ActiveXเนื่องจากมีโอกาสที่จะแสดงข้อความเตือนที่น่ากลัวใน Internet Explorer และทำให้ผู้ใช้ของคุณตกใจ

คำเตือน ActiveX

หากใครต้องการใช้การตรวจสอบนี้พวกเขาควรพึ่งพาอ็อบเจ็กต์FileList ที่มีอยู่ในเบราว์เซอร์รุ่นใหม่เท่านั้นและอาศัยการตรวจสอบฝั่งเซิร์ฟเวอร์สำหรับเบราว์เซอร์รุ่นเก่าเท่านั้น ( การปรับปรุงแบบก้าวหน้า )

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 โปรดตรวจสอบขนาดไฟล์ก่อนโดยส่งคำขอ ajax ไปยังสคริปต์ php ที่ตรวจสอบขนาดไฟล์และส่งคืนค่า



0

โดยส่วนตัวแล้วฉันจะบอกว่าคำตอบของ Web Worldดีที่สุดในปัจจุบันเนื่องจากมาตรฐาน HTML หากคุณต้องการรองรับ IE <10 คุณจะต้องใช้ ActiveX บางรูปแบบ ฉันจะหลีกเลี่ยงคำแนะนำที่เกี่ยวข้องกับการเข้ารหัสกับ Scripting FileSystemObject หรืออินสแตนซ์ ActiveX โดยตรง

ในกรณีนี้ฉันประสบความสำเร็จในการใช้ไลบรารี JS ของบุคคลที่สามเช่นpluploadซึ่งสามารถกำหนดค่าให้ใช้การควบคุม HTML5 apis หรือ Flash / Silverlight เพื่อทดแทนเบราว์เซอร์ที่ไม่รองรับ Plupload มี API ฝั่งไคลเอ็นต์สำหรับตรวจสอบขนาดไฟล์ที่ทำงานใน IE <10

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.