html5文件学习笔记1

在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验证