在html5中,通过file属性,可以很轻松实现多文件上传:
<input type="file" multiple=true onChange="fileUpload_GetFileList(this.files)" accept="image/png" />
<ul id="ulUpload"></ul>
function $$(id){
return document.getElementById(id);
}
function fileUpload_GetFileList(file){
var strli = "<li class='li'>";
strli += "<span>文件名称</span>";
strli += "<span>文件类型</span>";
strli += "<span>文件大小</span>";
strli += "</li>";
for(var i = 0;i<file.length;i++){
var tempFile = file[i];
strli += "<li>";
strli += "<span>" + tempFile.name + "</span>";
strli += "<span>" + tempFile.type + "</span>";
strli += "<span>" + tempFile.size + " KB</span>";
strli += "</li>";
}
$$("ulUpload").innerHTML = strli;
}
在测试过程中发现,各浏览器支持不一致:ie9不支持;safari浏览器不能获得文件大小,也不能过滤文件类型(即不支持accept属性);firfox能实现功能(不能过滤文件类型),但展现效果不是很好;目前支持的最好的是chrome浏览器。但是在目前的浏览器中,通过accept属性来过滤文件并不是很有效。原因在于,即便通过属性设置了文件选择的类型,但不是该类型的文件同样也可以被选中(如在文件选择对话框中改变选择文件类型),也能被文件元素所接受。因此,使用这种过滤上传文件类型,从目前来讲,并不是很实用,还是需要通过javascript验证