Dapatkan ukuran file sebelum mengupload

Apakah ada cara untuk mengetahui ukuran file sebelum mengupload file menggunakan AJAX / PHP jika terjadi perubahan file input?

Untuk HTML di bawah

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

coba yang berikut ini:

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

});

Lihat utas berikut:

Bagaimana cara memeriksa ukuran input file dengan jQuery?

<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();" />

Bekerja di IE dan FF

Berikut adalah contoh sederhana untuk mendapatkan ukuran file sebelum mengupload. Ini menggunakan jQuery untuk mendeteksi setiap kali konten ditambahkan atau diubah, tetapi Anda masih bisa mendapatkannya files[0].sizetanpa menggunakan 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>

Berikut contoh yang lebih lengkap, beberapa bukti kode konsep untuk Drag and Drop file ke FormData dan mengunggah melalui POST ke server. Ini mencakup pemeriksaan sederhana untuk ukuran file.

Saya memiliki masalah yang sama dan sepertinya kami belum memiliki solusi yang akurat. Semoga ini bisa membantu orang lain.

Setelah meluangkan waktu untuk menjelajah, akhirnya saya menemukan jawabannya. Ini adalah kode saya untuk melampirkan file dengan jQuery:

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

Ini hanyalah contoh kode untuk mendapatkan ukuran file. Jika Anda ingin melakukan hal lain, silakan ubah kode untuk memenuhi kebutuhan Anda.

Solusi terbaik yang berfungsi di semua browser;)

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

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

UPDATE: Kami akan menggunakan fungsi ini untuk memeriksa apakah itu browser IE atau bukan

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

Browser dengan dukungan HTML5 memiliki properti file untuk jenis input. Ini tentu saja tidak akan berfungsi di versi IE yang lebih lama.

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

Solusi ucefkh bekerja paling baik, tetapi karena $ .browser sudah tidak digunakan lagi di jQuery 1.91, harus diubah untuk menggunakan 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);
    }
}

Anda perlu melakukan permintaan HEAD ajax untuk mendapatkan ukuran file. dengan jquery itu seperti ini

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

Harap jangan gunakan ActiveXkarena kemungkinan besar itu akan menampilkan pesan peringatan yang menakutkan di Internet Explorer dan menakut-nakuti pengguna Anda.

Jika ada yang ingin menerapkan pemeriksaan ini, mereka hanya boleh mengandalkan objek FileList yang tersedia di browser modern dan mengandalkan pemeriksaan sisi server hanya untuk browser lama ( peningkatan progresif ).

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

Anda dapat menggunakan fungsi ukuran file PHP. Saat mengupload menggunakan ajax, silahkan cek filesize terlebih dahulu dengan membuat request ajax request ke script php yang memeriksa filesize dan mengembalikan nilainya.

Anda dapat menggunakan API File HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Namun Anda harus selalu memiliki cadangan untuk PHP (atau bahasa backend lain yang Anda gunakan) untuk browser lama.

Secara pribadi, saya akan mengatakan jawaban Dunia Web adalah yang terbaik saat ini, mengingat standar HTML. Jika Anda perlu mendukung IE <10, Anda perlu menggunakan beberapa bentuk ActiveX. Saya akan menghindari rekomendasi yang melibatkan pengkodean terhadap Scripting.FileSystemObject, atau membuat instance ActiveX secara langsung.

Dalam kasus ini, saya telah berhasil menggunakan pustaka JS pihak ketiga seperti plupload yang dapat dikonfigurasi untuk menggunakan apis HTML5 atau kontrol Flash / Silverlight untuk mengisi ulang browser yang tidak mendukungnya. Plupload memiliki API sisi klien untuk memeriksa ukuran file yang berfungsi di IE <10.