Question

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

我正在跟踪输入字段。

<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>

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

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

我们将为您提供任何帮助，如果您需要更多信息，请随时提问。

Answer 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>

Answer 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>

Answer 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>

以及您的upload-images.php

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

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

3 个答案: