客户端使用 HTML5检查文件大小？

我试图乘着 HTML5的浪潮，但我面临着一个小问题。在 HTML5之前，我们用 flash 检查文件大小，但现在的趋势是避免在网络应用程序中使用 flash。有什么办法可以检查客户端的文件大小使用 HTML5？

97430 次浏览
小开

"no simple, cross-browser solution to achieve this" : Detecting file upload size on the client side?

小开
最佳答案

This works. Place it inside an event listener for when the input changes.

if (typeof FileReader !== "undefined") {
var size = document.getElementById('myfile').files[0].size;
// check file size
}
小开

The HTML5 file API supports to check the file size.

Read this article to get more info about file api

http://www.html5rocks.com/en/tutorials/file/dndfiles/

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




var size = document.getElementById("fileInput").files[0].size;

similarly file API gives name and type.

小开

The accepted answer is actually correct, but you need to bind it to a event listener so that it would update when ever the file input is changed.

document.getElementById('fileInput').onchange = function(){
var filesize = document.getElementById('fileInput').files[0].size;
console.log(filesize);
}

If you are using jQuery library then the following code may come handy

$('#fileInput').on('change',function(){
if($(this).get(0).files.length > 0){ // only if a file is selected
var fileSize = $(this).get(0).files[0].size;
console.log(fileSize);
}
});

Given that the conversion of the fileSize to display in which ever metric is up to you.

小开

Personally, I would opt for this format:

    $('#inputFile').bind('change', function(e) {
var data = e.originalEvent.target.files[0];
// and then ...
console.log(data.size + "is my file's size");
// or something more useful ...
if(data.size < 500000) {
// what your < 500kb file will do
}
}
小开

I prefer to do the check (validation), when the form is about to be submitted. That way, I don't have to perform an extra check to know if a file was selected, because the size check happens alongside other html5 validation attributes (e.g. required).

$('#fileForm').on('submit',function() {
// file will not submit if is greater than 5MB
if($('#fileInput').prop('files')[0].size > 5*1024*1024){
alert('Max file size is 5MB');
return false;
}
});

提交答案