html5上传文件，Firefox支持重复选择同一文件，其它浏览器不支持

最新推荐文章于 2020-04-19 00:41:55 发布

雅典丹

最新推荐文章于 2020-04-19 00:41:55 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/sliencedream/article/details/22297565

版权

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>

雅典丹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5上传文件，Firefox支持重复选择同一文件，其它浏览器不支持

html5上传文件，Firefox支持重复选择同一文件，其它浏览器不支持这是我在实践中发现的问题，是什么原因导致我不清楚（可能跟各个浏览器的处理机制有关。知道原因的麻烦告知下哦~），不过有解决办法：在每次选择文件后给选择按钮的值赋上空，这样每个浏览器都支持重复选择同一文件了。测试html5在不同浏览器重复选择一个文件的情况 <input type="file" clas
复制链接

扫一扫