Jawaban:
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.
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>MiBjika Anda menghitung ke pangkalan 1024.
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">sizeproperti
$(obj).files[0].size/1024/1024; Tetapi mengubahnya menjadiobj.files[0].size/1024/1024;
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.
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;
}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.'
);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">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
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");
}
}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>Anda bisa mencoba ini fineuploader
Ini berfungsi dengan baik di bawah IE6 (dan di atas), Chrome atau Firefox
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.