Validasi ukuran unggah file JavaScript

254

Apakah ada cara untuk memeriksa ukuran file sebelum mengunggahnya menggunakan JavaScript?

javascript validation file-upload Tabut
sumber

327

Ya , ada fitur baru dari W3C yang didukung oleh beberapa browser modern, File API . Ini dapat digunakan untuk tujuan ini, dan mudah untuk menguji apakah itu didukung dan mundur (jika perlu) ke mekanisme lain jika tidak.

Ini contoh lengkapnya:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
    var input, file;

    // (Can't use `typeof FileReader === "function"` because apparently
    // it comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>

Dan di sini adalah dalam tindakan. Cobalah itu dengan Chrome atau Firefox versi terbaru.

Sedikit di luar topik, tetapi: Perhatikan bahwa validasi sisi klien bukan pengganti untuk validasi sisi server. Validasi sisi klien murni untuk memungkinkan memberikan pengalaman pengguna yang lebih baik. Misalnya, jika Anda tidak mengijinkan mengunggah file lebih dari 5MB, Anda bisa menggunakan validasi sisi klien untuk memeriksa bahwa file yang dipilih pengguna tidak lebih dari 5MB dan memberi mereka pesan ramah yang bagus jika itu adalah (jadi mereka tidak menghabiskan waktu mengunggah hanya untuk mendapatkan hasil yang dibuang di server), tetapi Anda juga harus memberlakukan batas itu di server, karena semua batas sisi klien (dan validasi lainnya) dapat dielakkan.

TJ Crowder
sumber

12

+1 untuk "semua batas sisi klien (dan validasi lainnya) dapat dielakkan". Ini juga berlaku untuk aplikasi frontend database "asli" / "dikompilasi". Dan jangan masukkan kata sandi akses basis data ke dalam kode yang Anda kompilasi, bahkan "tidak terenkripsi" (dengan kata sandi yang ada dalam kode juga - lihat saja baru-baru ini).

masterxilo

117

Menggunakan jquery:

<form action="upload" enctype="multipart/form-data" method="post">

    Upload image:
    <input id="image-file" type="file" name="file" />
    <input type="submit" value="Upload" />

    <script type="text/javascript">
        $('#image-file').bind('change', function() {
            alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
        });
    </script>

</form>

Ben
sumber

2

@ PPD, ada kemungkinan mundur IE8? (Aku membenci diriku sendiri karena menyebutkan IE)

Asher

2

Ini berfungsi dengan baik tetapi apakah itu berfungsi untuk banyak file juga?

Ingus

4

Seharusnya MiBjika Anda menghitung ke pangkalan 1024.

slartidan

69

Bekerja untuk Elemen File Dinamis dan Statis

Solusi Javascript Saja

function ValidateSize(file) {
        var FileSize = file.files[0].size / 1024 / 1024; // in MB
        if (FileSize > 2) {
            alert('File size exceeds 2 MB');
           // $(file).val(''); //for clearing with Jquery
        } else {

        }
    }

 <input onchange="ValidateSize(this)" type="file">

Luaskan cuplikan

Arun Prasad ES
sumber

1

Jawaban bagus. Saya mengalami masalah yang sama tetapi solusi Anda bekerja untuk saya :)

Dipankar Das

1

NB OP mengedit tulisan sehingga kodenya sekarang benar, menggunakan sizeproperti

UsAndRufus

1

Terima kasih atas jawabannya, saya hampir melakukan hal yang sama tetapi dengan satu perubahan. $(obj).files[0].size/1024/1024; Tetapi mengubahnya menjadiobj.files[0].size/1024/1024;

shakir Baba

Apakah ada cara untuk memperpanjang ini untuk validasi lebar dan tinggi? (meninggalkan "file" sebagai titik awal dan menganggapnya merujuk pada gambar)

jlmontesdeoca

@ jlmontesdeoca Saya pikir Anda bisa membaca file dengan bantuan kanvas dan dapatkan tinggi dan lebarnya di sini.

Arun Prasad ES

14

~~Tidak~~ Ya, menggunakan File API di browser yang lebih baru. Lihat jawaban TJ untuk detailnya.

Jika Anda perlu mendukung browser lama juga, Anda harus menggunakan pengunggah berbasis Flash seperti SWFUpload atau Uploadify untuk melakukan ini.

The swfupload Fitur Demo menunjukkan bagaimana file_size_limitpengaturan bekerja.

Perhatikan bahwa ini (jelas) membutuhkan Flash, ditambah cara kerjanya sedikit berbeda dari bentuk unggah normal.

Pekka
sumber

14

Sederhana saja.

            var oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>

            if (oFile.size > 2097152) // 2 mb for bytes.
            {
                alert("File size must under 2mb!");
                return;
            }

Hasan Tuna Oruç
sumber

Jawaban Terbaik. manis dan sederhana ... :)

A. Sinha

12

Jika Anda menggunakan Validasi jQuery, Anda dapat menulis sesuatu seperti ini:

$.validator.addMethod(
    "maxfilesize",
    function (value, element) {
        if (this.optional(element) || ! element.files || ! element.files[0]) {
            return true;
        } else {
            return element.files[0].size <= 1024 * 1024 * 2;
        }
    },
    'The file size can not exceed 2MB.'
);

Nikolaos Georgiou
sumber

4

Saya membuat sesuatu seperti itu:

$('#image-file').on('change', function() {
 var numb = $(this)[0].files[0].size/1024/1024;
numb = numb.toFixed(2);
if(numb > 2){
alert('to big, maximum is 2MB. You file size is: ' + numb +' MB');
} else {
alert('it okey, your file has ' + numb + 'MB')
}
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">

Luaskan cuplikan

kibus90
sumber

Ini mengatakan javascript, JQuery tidak ada di tag

Hello234

3

Saya menggunakan satu fungsi Javascript utama yang saya temukan di situs Jaringan Pengembang Mozilla https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications , bersama dengan fungsi lain dengan AJAX dan diubah sesuai dengan kebutuhan saya. Ia menerima id elemen dokumen mengenai tempat dalam kode html saya di mana saya ingin menulis ukuran file.

<Javascript>

function updateSize(elementId) {
    var nBytes = 0,
    oFiles = document.getElementById(elementId).files,
    nFiles = oFiles.length;

    for (var nFileId = 0; nFileId < nFiles; nFileId++) {
        nBytes += oFiles[nFileId].size;
    }
    var sOutput = nBytes + " bytes";
    // optional code for multiples approximation
    for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
    }

    return sOutput;
}
</Javascript>

<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>

<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>

Bersulang

Jose Gaspar
sumber

3

Meskipun pertanyaannya dijawab, saya ingin memposting jawaban saya. Mungkin berguna bagi pemirsa di masa depan. Anda dapat menggunakannya seperti pada kode berikut.

<input type="file" id="fileinput" />
<script type="text/javascript">
  function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0]; 
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
        alert( "Got the file.n" 
              +"name: " + f.name + "n"
              +"type: " + f.type + "n"
              +"size: " + f.size + " bytesn"
              + "starts with: " + contents.substr(1, contents.indexOf("n"))
        ); 
        if(f.size > 5242880) {
               alert('File size Greater then 5MB!');
                }


      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

Lemon Kazi
sumber

3

Contoh JQuery yang disediakan di utas ini sudah sangat usang, dan google tidak membantu sama sekali jadi inilah revisi saya:

 <script type="text/javascript">
        $('#image-file').on('change', function() {
            console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
        });
    </script>

nodws
sumber

1

Anda bisa mencoba ini fineuploader

Ini berfungsi dengan baik di bawah IE6 (dan di atas), Chrome atau Firefox

anson
sumber

3

Pengunggah Baik tidak dapat memvalidasi ukuran file di IE9 dan lebih lama karena tidak mendukung API File tidak didukung. IE10 adalah versi pertama Internet Explorer yang mendukung API File.

Ray Nicholus

-2

Jika Anda mengatur Yaitu 'Mode Dokumen' ke 'Standar' Anda dapat menggunakan metode 'ukuran' javascript sederhana untuk mendapatkan ukuran file yang diunggah.

Atur Ie 'Document Mode' ke 'Standards':

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Kemudian, gunakan metode javascript 'ukuran' untuk mendapatkan ukuran file yang diunggah:

<script type="text/javascript">
    var uploadedFile = document.getElementById('imageUpload');
    var fileSize = uploadedFile.files[0].size;
    alert(fileSize); 
</script>

Ini bekerja untuk saya.

Lilla
sumber

1

Ini tidak akan berfungsi di IE9 atau lebih lama, apa pun meta tag yang Anda tambahkan.

Ray Nicholus

Validasi ukuran unggah file JavaScript

Jawaban: