使用jQuery,在上传之前限制文件大小

Question

在PHP上,他们有一种方法可以在上传后限制文件大小,但不能在上传之前.我使用Malsup jQuery Form Plugin进行表单发布,它支持图像文件发布.

我想知道是否有一个限制,我可以设置多少字节可以通过AJAX流直到服务器？这可以允许我检查文件大小并在文件太大时返回错误.

通过在客户端执行此操作,它阻止那些从他们的Pentax拍摄10MB照片并尝试上传的新手.

Answer 1

这是我在一个非常相似的问题中回答的副本:如何使用jQuery检查文件输入大小？

您实际上无权访问文件系统(例如读取和写入本地文件).但是,由于HTML5 File API规范,您可以访问一些文件属性,文件大小就是其中之一.

对于这个HTML:

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

尝试以下方法:

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

由于它是HTML5规范的一部分,它只适用于现代浏览器(IE需要v10),我在这里添加了更多关于您应该知道的其他文件信息的详细信息和链接:http://felipe.sabino.me/javascript/2012/01/30/javascipt的检查的所述文件尺寸/

旧浏览器支持

请注意,旧浏览器将返回null上一次this.files调用的值,因此访问this.files[0]将引发异常,您应该在使用之前检查File API支持

Answer 2

除非你使用flash,activex或java上传器,否则我认为这是不可能的.

出于安全原因,在上载之前或期间,不允许ajax/javascript访问文件流或文件属性.

Answer 3

我试过这种方式,我在IE*中获得结果,而Mozilla 3.6.16,没有检查旧版本.

<img id="myImage" src="" style="display:none;"><br>
<button onclick="findSize();">Image Size</button>
<input type="file" id="loadfile" />
<input type="button" value="find size" onclick="findSize()" />
<script type="text/javascript">
function findSize() {
    if ( $.browser.msie ) {
       var a = document.getElementById('loadfile').value;
           $('#myImage').attr('src',a);
           var imgbytes = document.getElementById('myImage').size;
           var imgkbytes = Math.round(parseInt(imgbytes)/1024);
           alert(imgkbytes+' KB');
    }else {
           var fileInput = $("#loadfile")[0];
           var imgbytes = fileInput.files[0].fileSize; // Size returned in bytes.
           var imgkbytes = Math.round(parseInt(imgbytes)/1024);
                   alert(imgkbytes+' KB');
     }
}    
</script>

另外添加Jquery库.