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

ฉันมีแบบฟอร์มที่มีความสามารถในการอัปโหลดไฟล์และฉันต้องการให้มีการรายงานข้อผิดพลาดฝั่งไคลเอ็นต์ที่ดีหากไฟล์ที่ผู้ใช้พยายามอัปโหลดมีขนาดใหญ่เกินไปมีวิธีตรวจสอบขนาดไฟล์ด้วย jQuery หรือไม่ บนไคลเอนต์หรือโพสต์ไฟล์กลับไปที่เซิร์ฟเวอร์เพื่อตรวจสอบ?

คุณไม่มีสิทธิ์เข้าถึงระบบไฟล์ (เช่นการอ่านและเขียนไฟล์ในเครื่อง) อย่างไรก็ตามเนื่องจากข้อกำหนดของ HTML5 File Api มีคุณสมบัติของไฟล์บางอย่างที่คุณสามารถเข้าถึงได้และขนาดไฟล์ก็เป็นหนึ่งในนั้น

สำหรับ 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 ก็จะทำงานเฉพาะสำหรับเบราว์เซอร์ที่ทันสมัย (v10 จำเป็นสำหรับ IE) และฉันเพิ่มที่นี่ดูรายละเอียดเพิ่มเติมและการเชื่อมโยงข้อมูลเกี่ยวกับไฟล์อื่น ๆ ที่คุณควรรู้: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt- ตรวจสอบขนาดไฟล์ /

รองรับเบราว์เซอร์รุ่นเก่า

โปรดทราบว่าเบราว์เซอร์เก่าจะส่งคืนnullค่าสำหรับการthis.filesโทรครั้งก่อนดังนั้นการเข้าถึงthis.files[0]จะเพิ่มข้อยกเว้นและคุณควรตรวจสอบการรองรับ File APIก่อนใช้งาน

หากคุณต้องการใช้ jQuery validateคุณสามารถทำได้โดยการสร้างวิธีนี้:

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

รหัสนี้:

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

ส่งกลับขนาดไฟล์สำหรับอินพุตแบบฟอร์ม

ใน FF 3.6 และใหม่กว่ารหัสนี้ควรเป็น:

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

ฉันกำลังโพสต์โซลูชันของฉันด้วยซึ่งใช้สำหรับการFileUploadควบคุมASP.NET บางทีอาจจะมีคนคิดว่ามันมีประโยชน์

    $(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;
        }
    })
});

ใช้ด้านล่างเพื่อตรวจสอบขนาดไฟล์และดูว่ามีขนาดใหญ่กว่าหรือไม่

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

คุณสามารถตรวจสอบประเภทนี้ได้ด้วย Flash หรือ Silverlight แต่ไม่ใช่ Javascript จาวาสคริปต์แซนด์บ็อกซ์ไม่อนุญาตให้เข้าถึงระบบไฟล์ การตรวจสอบขนาดจะต้องทำในฝั่งเซิร์ฟเวอร์หลังจากอัปโหลดแล้ว

หากคุณต้องการไปเส้นทาง Silverlight / Flash คุณสามารถตรวจสอบได้ว่าหากไม่ได้ติดตั้งเป็นค่าเริ่มต้นเป็นตัวจัดการการอัปโหลดไฟล์ทั่วไปที่ใช้การควบคุมปกติ ด้วยวิธีนี้หากมีการติดตั้ง Silverlight / Flash ไว้ประสบการณ์ของพวกเขาจะดีขึ้นเล็กน้อย

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

ฉันพบว่านี่เป็นวิธีที่ง่ายที่สุดหากคุณไม่ได้วางแผนที่จะส่งแบบฟอร์มผ่านวิธี ajax / html5 มาตรฐาน แต่แน่นอนว่ามันใช้ได้กับทุกอย่าง

หมายเหตุ:

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

สิ่งนี้เคยใช้งานได้ แต่มันไม่ได้อยู่ในโครเมี่ยมอีกต่อไปฉันเพิ่งทดสอบโค้ดด้านบนและมันใช้งานได้ทั้ง ff และ chrome (ล่าสุด) ["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;
}