如何在多个文件上传中从 jQuery 中删除单个上传的文件答案

【问题标题】：how to remove single uploaded file from jQuery in multiple file upload如何在多个文件上传中从 jQuery 中删除单个上传的文件
【发布时间】：2018-11-23 02:46:49
【问题描述】：

我到处搜索，但仍然没有得到我想要的。

我正在关注输入字段。

<div class="form-group gallery-add-button">
    <label class="col-form-label" for="images">Image Gallery</label>
    <div class="gallery-item-wrapper-0">
        <input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
    </div>
</div>

我已经进行了图像预览，并且在单击删除按钮时，图像预览被删除。在这种情况下，我也想从文件上传字段中删除上传的图像。有什么办法可以做到这一点。

我找到了一种方法来删除所有上传的文件，但不是特定的图像。

感谢您提供任何帮助，如果您需要更多信息，请随时提出。

【问题讨论】：

标签： javascript jquery html file multiple-file-upload

【解决方案1】：

我有一个删除图片的例子，希望对你有帮助。

 // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    var htmlImage =  '<div>';
                        htmlImage = htmlImage +  '<img  src="'+event.target.result+'" />';  
                        htmlImage = htmlImage +  '<input onclick="removeImage($(this))" type="button" value="Delete" />'; 
                        htmlImage = htmlImage +  '</div>';        
                    $($.parseHTML(htmlImage)).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };
    
    function removeImage(item) {
      //alert(item);
       item.parent().remove();
    }
    
    $('#photo-gallery').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
    <label class="col-form-label" for="images">Image Gallery</label>
    <div class="gallery-item-wrapper-0">
        <input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
        
        <div class="gallery"></div>
    </div>
</div>

【讨论】：

当我点击删除按钮时，浏览按钮旁边还有文件名
我认为您应该在事件更改中将图像名称设置为空。 ("#photo-gallery").val('');

【解决方案2】：

这段代码我写得很快，希望对你有帮助
如果这是你需要的，你需要帮助，我会做的

var files=[];
$("#photo-gallery").change(function(){
	for(var i=0;i<this.files.length;i++){
		files.push(this.files[i]);
	}
	refreshFiles();
  $(this).val('');
});
function refreshFiles(){
	for(var i=0;i<files.length;i++){
		$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
	}
}
$(document).on('click','.delete-image',function(){
	var id=parseInt($(this).attr("image-id"));
	files.splice(id,1);
	$("#result").empty();
	refreshFiles();
});
$(document).on('click','a',function(){
	if($(this).attr("href")==="#"){
		return false;
	}
});

body{
  font-family:arial;
}
#result{
	margin:4px 0;
}
.img-div{
	position:relative;
	display:block;
	width:200px;
	height:40px;
	line-height:40px;
	margin:4px 0;
	border:1px solid #999;
	border-radius:6px;
	padding:0 8px;
}
.delete-image{
	position:relative;
	display:inline-block;
	float:right;
	height:40px;
	line-height:40px;
	margin-left:20px;
	text-decoration:none;
	padding:0 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group gallery-add-button">
    <label class="col-form-label" for="images">Image Gallery</label>
    <div class="gallery-item-wrapper-0">
        <input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
    </div>
</div>
<div id="result"></div>
</body>

【讨论】：

感谢您的回答。我已经制作了删除按钮来删除预览，但是当我提交表单时，删除的图像仍然被提交。如果您知道可以实现这样的事情，那么非常欢迎您提出建议。
在这个例子中它将被删除，只是在你的表单数据中循环文件而不是文件输入
让我写完整的例子并贴出来
好的，慢慢来：D

【解决方案3】：

这是完整的示例，我对其进行了测试，它可以工作
确定你不能在这里测试上传，但在你的本地服务器上试试

var files=[];
$("#photo-gallery").change(function(){
	for(var i=0;i<this.files.length;i++){
		files.push(this.files[i]);
	}
	refreshFiles();
});
function refreshFiles(){
	for(var i=0;i<files.length;i++){
		$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
	}
}
$(document).on('click','.delete-image',function(){
	var id=parseInt($(this).attr("image-id"));
	files.splice(id,1);
	$("#result").empty();
	refreshFiles();
});
$(document).on('click','a',function(){
	if($(this).attr("href")==="#"){
		return false;
	}
});
$(document).on('click','#submit',function(){
  if(files.length===0){
    return false;
  }
	var fd=new FormData();
	for(var i=0;i<files.length;i++){
		fd.append('img_'+i,files[i]);
	}
	$.ajax({
		url:"upload-images.php",
		method:"post",
		cache:false,
		dataType:'json',
		processData:false,
		contentType:false,
		data: fd,
		success: function(data){
			console.log(data);
		}
	});
});

.img-div{
	position:relative;
	display:block;
	width:300px;
	height:40px;
	line-height:40px;
	margin:4px 0;
	border:1px solid #999;
	border-radius:6px;
	padding:0 8px;
}
.delete-image{
	position:relative;
	display:inline-block;
	float:right;
	height:40px;
	line-height:40px;
	margin-left:20px;
	text-decoration:none;
	padding:0 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
    <label class="col-form-label" for="images">Image Gallery</label>
    <div class="gallery-item-wrapper-0">
        <input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
    </div>
</div>
<div id="result"></div>
<br>
<button id="submit">submit image</button>

在你上传图片.php

foreach($_FILES as $file){
    //your code
}

【讨论】：