Dapatkan ukuran file sebelum mengupload

91

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

javascript  jquery  ajax  file-upload  filesize 
— Nisanth Kumar
sumber
2
— Akal Sehat Anda
1
— L84
Berikut adalah tutorial langkah demi langkah untuk mendapatkan nama file, jenis dan ukuran codepedia.info/…
— Satinder singh
— Frank Tan

Jawaban:

134

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?

— Brij
sumber
1
Bukankah array file tidak ada di internet explorer (versi lama)?
— Tiago César Oliveira
4
Ya, ini tidak berfungsi sebelum IE 10 dan hanya memiliki dukungan parsial di android dan ios. caniuse.com/fileapi . Jika semudah ini saja ...
— styks
2
Saya kira hasilnya dalam byte?
— Erdal G.
4
@Tokopedia Pertanyaan bagus! MDN tidak memiliki dokumentasinya, tetapi FileList.filesberupa objek seperti larik File, yang merupakan perpanjangan dari Glob. Dan menurut spesifikasi , Globmemang mendefinisikan sizeproperti sebagai jumlah byte (0 untuk file kosong). Jadi ya, hasilnya dalam byte .
— 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();" />

Bekerja di IE dan FF

— Behnam Bakhshi
sumber
15
tidak dipilih karena jawabannya menggunakan ActiveX. di 2015, bahkan Microsoft meninggalkan ActiveX. Meskipun itu adalah saran yang masuk akal saat diberikan, saya akan merekomendasikan pengembang menghindari ini sekarang dan di masa depan.
— scott stone
3
Saya suka solusi ini, karena hanya versi IE yang lebih lama yang akan mengembalikan true untuk window.ActiveXObject.
— Rob Breidecker
@scottstone Saya tidak mengerti mengapa Anda memilih semua jawaban yang mendukung browser lama? Jawaban ini jauh lebih bersih daripada yang menggunakan sidik jari browser dan sama sekali tidak merekomendasikan siapa pun untuk menggunakan ActiveX.
— Nicolas Bouvrette
@NicolasBouvrette - Saya setuju bahwa jawaban ini jauh lebih bersih daripada yang lain, tetapi saya tidak dapat menghapus suara negatif pada saat ini. Pertanyaan asli tidak menanyakan kompatibilitas dengan versi lama IE, dan jawaban ini tidak memberi tahu pembaca bahwa sebagian besar kode ada untuk mendukung versi IE 5+ tahun.
— scott stone
@scottstone Sebenarnya satu lagi poin nyata dari pandangan saya tentang mengapa tidak menggunakan ActiveX adalah karena ini menampilkan pesan peringatan di IE yang merupakan pengalaman pengguna yang mengerikan (menakutkan?).
— Nicolas Bouvrette
13

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

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.

— jaggedsoft
sumber
8

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.

— Hoang Le
sumber
Saya suka yang ini karena tidak perlu diletakkan di acara perubahan seperti solusi paling populer. Dan saya juga menyukai kenyataan bahwa Anda telah memberi saya izin untuk mengubah kode untuk memenuhi kebutuhan saya :)
— Matt
8

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;
}
— ucefkh
sumber
3
tidak dipilih karena jawabannya menggunakan ActiveX. di 2015, bahkan Microsoft meninggalkan ActiveX. Meskipun itu adalah saran yang masuk akal saat diberikan, saya akan merekomendasikan pengembang menghindari ini sekarang dan di masa depan. -
— scott stone
1
$ .browser telah dihapus dari jQuery pada versi 1.9 (tidak digunakan lagi sejak v 1.3).
— Silvio Delgado
2
@scottstone ini untuk kompabilitas ke belakang dan itu tidak benar Microsoft tidak akan mengabaikan ActiveX itu terlalu banyak digunakan dalam banyak hal dan ini adalah buktinya computerworld.com/article/2481188/internet/…
— ucefkh
@SilvioDelgado Mengubah dan memperbarui mereka menghapus $ .browser menjadi plugin jadi kami hanya perlu tes kecil untuk browser IE (bekerja dengan semua versi)
— 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>
Luaskan cuplikan

— vishay hard
sumber
3

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);
}
— Sandeep G
sumber
2

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);
    }
}
— Mike
sumber
1

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"));
    }
  });
— kasper Taeymans
sumber
Tetapi apakah input file tersebut akan menjadi jelas (kosong) ?? Bisakah Anda membuat contoh terima
— DeLe
1

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

Peringatan ActiveX

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;
}
— Nicolas Bouvrette
sumber
0

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.

— rechie
sumber
0

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.

— scott stone
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.