上传多个图片撤销问题

逍遥小小妖 2014-12-31 06:02:59

一个multiple的file类型input标签，使用filereader实现图片预览。问题来了，现在要取消某一个图片，怎么实现？
一种方案，使用多个file类型input标签（非multiple），取消简单，那么上传怎么办？name取一样吗？

...全文

387 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

Go 旅城通票 2015-01-07

打赏
举报

支持multiple的file类型一般也支持HTML5的FormData对象，直接用FormData+ajax来上传文件搞定。

或者如#5老大说的，用一个隐藏的hidden域存储要删除的文件下标，服务器不保存已经存储的下标。

多个同名的file对象也可以。

孟子E章 2015-01-07

打赏
举报

fileToUpload.files是只读的，你不能删除的。你可以删除预览，再上传的时候判断文件名，删除掉的文件进行Abort上传

逍遥小小妖 2015-01-06

打赏
举报

引用 3 楼 net_lover 的回复:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
  var files = null;
  function fileSelected() {
  document.getElementById('preview').innerHTML="";
	files = document.getElementById('fileToUpload').files;
	if (files) {
	for(var i = 0,f;f=files[i];i++){
		var reader = new FileReader(), htmlImage;
		reader.onload = (function(file){
		return function(e) {
			htmlImage = '<div><img src="'+ e.target.result +'" /><a href="javascript:;" f="' + file.name + '" onclick="deleteFile(this)">删除</a></div>';
			document.getElementById('preview').innerHTML += htmlImage;
		}
		})(f);
		reader.readAsDataURL(f);
		}
	}
  }
var deletedFile = [];
function deleteFile(obj){
	obj.parentNode.parentNode.removeChild(obj.parentNode);
	deletedFile.push(obj.getAttribute("f"))
}
function uploadFile(){
 alert("上传的时候请删除这些文件：" + deletedFile);
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.do">
<div class="row">
<label for="fileToUpload">选择文件：</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" multiple="multiple"/>
</div>
<input type="button" onclick="uploadFile()" value="Upload" />
<div id="preview"></div>
</form>
</body>
</html>

恩，做到这步，删不掉


var files=fileToUpload.files;
 for(var i in files){
 	for(var j in deletedFile){
 		if(files[i].name==deletedFile[i]){
 			delete files[i];
 		}
 	}
 	console.log(files[i].name);
 }
 console.log(files.length);

孟子E章 2015-01-05

打赏
举报

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
  var files = null;
  function fileSelected() {
  document.getElementById('preview').innerHTML="";
	files = document.getElementById('fileToUpload').files;
	if (files) {
	for(var i = 0,f;f=files[i];i++){
		var reader = new FileReader(), htmlImage;
		reader.onload = (function(file){
		return function(e) {
			htmlImage = '<div><img src="'+ e.target.result +'" /><a href="javascript:;" f="' + file.name + '" onclick="deleteFile(this)">删除</a></div>';
			document.getElementById('preview').innerHTML += htmlImage;
		}
		})(f);
		reader.readAsDataURL(f);
		}
	}
  }
var deletedFile = [];
function deleteFile(obj){
	obj.parentNode.parentNode.removeChild(obj.parentNode);
	deletedFile.push(obj.getAttribute("f"))
}
function uploadFile(){
 alert("上传的时候请删除这些文件：" + deletedFile);
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.do">
<div class="row">
<label for="fileToUpload">选择文件：</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" multiple="multiple"/>
</div>
<input type="button" onclick="uploadFile()" value="Upload" />
<div id="preview"></div>
</form>
</body>
</html>

逍遥小小妖 2015-01-05