在HTML 5中，现在可以在客户端验证文件上传，例如用户选择文件后立即验证mcrc的大小和属性。本文介绍了代码农民html5如何验证客户端上传文件的大小，感兴趣的代码农民可以参考。

在HTML 5中，现在可以在客户端验证上传的文件，比如用户选择文件后立即验证mcrc的大小和属性，这实际上是由于新增加了在浏览器上验证文件的能力，其中支持HTML 5的浏览器将实现W3C实现的文件API标准，其中可以读取客户端文件的各种信息和参数。

下面的例子如下，首先是HTML

XML/HTML代码将内容复制到剪贴板

input type=' file ' data-file _ type=' zip | png ' data-max _ size=' 1000000 '

这里，在data-file_type属性中，指定了文件类型，接受ZIP和PNG文件，用|分隔，其中data-max-size指定文件大小，这里是1MB。然后用jquery判断

JavaScript代码将内容复制到剪贴板

$('input[type=file]')。每个(函数()

{

if(typeof$(this))。attr(' data-file _ type ')=' string ')

{

varfile_types=$(this)。attr('data-file_type ')。拆分(' | ')；

}

var mimes=get _ mimes(file _ types)；

//文件所需的指定大小

varmax_size=parseInt($(this)。attr(' data-max _ size ')；

$(这个)。变更(功能(evt)

{

varfinput=$(this)；

var files=evt . target . files；//获取文件对象

var output=[]；

for(vari=0，f；f=文件[I]；I)

{

//检查文件类型是否符合规定要求

if(jQuery.inArray(f.type，mimes)==-1)

{

警报(' Filetype ' f . type ' not allowed ')；

$(这个)。val(')；

继续；

}

//检查文件大小

elseif(f.sizemax_size)

{

警报(' Maximumfilesizeis' max_size '字节');

$(这个)。val(')；

}

//Validationok

其他

{

output.push('[b]'，f.name，'[/b]('，f.type||'n/a '，')-'，f.size，' bytes，lastmodified: '，f . LastmodifiedDate . ToLocaledateString())；

}

}

finput . after(' div ' output . join(')'/div ')；

});

});

在上面的代码中，var mimes=get _ mimes(file _ type)；实际上是一种方法，如下：

JavaScript代码将内容复制到剪贴板

/*

gethemimesmoleistofextensionsanarray

*/

functionget_mimes(扩展)

{

var mimes=[]；

for(varinestreams)

{

var ext=extensions[I]；

if(extin ime _ type)

{

varmime=mime _ types[ext]；

if($。isArray(mime))

{

jquery . merge(mime，mime)；

}

其他

{

mimes . push(mime)；

}

}

}

returnmimes

}

实际上，这里是传入ZIP、PNG等类型，然后返回与这类文件对应的MIME/TYPE，比如定义一个MIME _ TYPE数组，如下所示：

JavaScript代码将内容复制到剪贴板

varmime_types={

gif':'image//gif '，

jpeg':['image//jpeg '，' image//pjpeg']，

jpg':['image//jpeg '，' image//pjpeg']，

jpe':['image//jpeg '，' image//pjpeg']，

png':['image//png '，' image//x-png']，

...

}

重点是HTML 5中的新文件API，可以在客户端立即判断文件类型，如下：

XML/HTML代码将内容复制到剪贴板

var files=evt . target . files；//获取file对象，它是一个集合，可以有多个文件

varfile _ count=files.length//文件长度

var file _ 1=files[0]；//or files . item(0)；在这里获取多个文件的个文件

varname=file _ 1 . name；//获取文件名

varsize=file _ 1.size//获取文件大小

vartype=file _ 1.type//文件类型

varLastModifiedDate=file _ 1 . LastModifiedDate；//文件修改时间