Question

可能重复：
Using jQuery, Restricting File Size Before Uploading

在将文件上传到服务器之前，是否有一个好的jquery脚本或其他方法可以验证文件大小和文件类型？我试过看了一遍但从来没有找到任何可以做这样的事情。

Answer 1

我建议如下：

$('input:file').change(
    function(e) {
        var files = e.originalEvent.target.files;
        for (var i=0, len=files.length; i<len; i++){
            console.log(files[i].fileName, files[i].type, files[i].fileSize);
        }
    });

JS Fiddle demo

由于JavaScript无法从选定的fileList对象中删除文件，因此您必须对文件属性执行检查，并提示用户取消选择因文件类型或文件而被视为无效的文件-size（显然，阻止表单提交）：

$('input:file').change(
    function(e) {
        var files = e.originalEvent.target.files;
        for (var i=0, len=files.length; i<len; i++){
            var n = files[i].name,
                s = files[i].size,
                t = files[i].type;

            if (s > 100) {
                console.log('Please deselect this file: "' + n + '," it\'s larger than the maximum filesize allowed. Sorry!');
            }
        }
    });

JS Fiddle demo

（最后一个代码在Ubuntu 11.04上测试并在Chromium 19和Firefox 15中运行。）

Answer 2

从这里采取：How can I upload files asynchronously?

我不确定它是否可以在旧的浏览器上运行（比如IE6 / 7（呃，到底谁还在使用那些））但你可能会尝试一下。它应该适用于所有现代浏览器。试试吧：

<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="submit" value="Upload" />
</form>
$(':file').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});

Answer 3

有jQuery File Upload plugin，无需重新发明轮子。它有一个acceptFileTypes选项，允许您提供正则表达式以匹配给定的文件类型，以及maxFileSize选项，例如：

{
  fileTypes: /^(gif|jpeg|png)$/,
  maxFileSize: 20000000 // 20MB
}

但请注意，这仅适用于支持 File API 的网络浏览器。否则，您必须验证服务器端的文件类型。

jquery在提交之前验证文件类型和文件大小

3 个答案: