html5上传文件,Firefox支持重复选择同一文件,其它浏览器不支持
这是我在实践中发现的问题,是什么原因导致我不清楚(可能跟各个浏览器的处理机制有关。知道原因的麻烦告知下哦~),不过有解决办法:在每次选择文件后给选择按钮的值赋上空,这样每个浏览器都支持重复选择同一文件了。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试html5在不同浏览器重复选择一个文件的情况</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="file" class="file" id="html5UploadPhoto" multiple
name="fileselect[]" />
<script type="text/javascript">
var HTML5FILE = {
fileInput : $("#html5UploadPhoto").get(0),
fileFilter : [],
filter : function(files) {
var arrFiles = [];
for (var i = 0, file; file = files[i]; i++) {
arrFiles.push(file);
}
return arrFiles;
},
onSelect : function(files) {
alert("yes");
$("#html5UploadPhoto").val("");
},
funGetFiles : function(e) {
var files = e.target.files || e.dataTransfer.files;
this.fileFilter = this.fileFilter.concat(this.filter(files));
this.funDealFiles();
return this;
},
funDealFiles : function() {
for (var i = 0, file; file = this.fileFilter[i]; i++) {
file.index = i;
}
this.onSelect(this.fileFilter);
return this;
},
init : function() {
var self = this;
if (this.fileInput) {
this.fileInput.addEventListener("change", function(e) {
self.funGetFiles(e);
}, false);
}
}
};
HTML5FILE.init();
</script>
</body>