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

Question

I've searched everywhere and still don't get what I want. 我到处搜索过，仍然没有得到想要的东西。

I've following input field. 我一直在关注输入字段。

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

I've made image preview and on a remove button click, image preview is removed. 我已经进行了图像预览，并在“删除”按钮上单击，就删除了图像预览。 In this case, I want to remove uploaded image from file upload field as well. 在这种情况下，我也想从文件上传字段中删除上传的图像。 Is there any way to achieve this. 有什么办法可以做到这一点。

I've found a way to remove all uploaded files but not a particular image. 我找到了一种删除所有上载文件但不删除特定图像的方法。

Any kind of help is appreciated and if you need further information then feel free to ask. 感谢您提供任何帮助，如果您需要更多信息，请随时询问。

Answer 1

I have a example delete image hope it will help you. 我有一个删除图像的例子，希望对您有所帮助。

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

I wrote this code fast, hope it help 我快速编写了这段代码，希望对您有所帮助
if it was what you need and you need help, I will do 如果这是您需要的并且需要帮助，我会做

 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

this is the full example and I tested it and it works 这是完整的示例，我对其进行了测试，并且可以正常工作
sure you cant test upload here but try it in your local server 确定您无法在此处测试上传，但可以在本地服务器上尝试

 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>

and in you upload-images.php 然后在你upload-images.php

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

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

问题描述

3 个解决方案

解决方案1
0 2018-11-23 03:12:16

解决方案2
0 2018-11-23 03:26:36

解决方案3
0 2018-11-23 03:59:09

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

问题描述

3 个解决方案

解决方案1 0 2018-11-23 03:12:16

解决方案2 0 2018-11-23 03:26:36

解决方案3 0 2018-11-23 03:59:09

解决方案1
0 2018-11-23 03:12:16

解决方案2
0 2018-11-23 03:26:36

解决方案3
0 2018-11-23 03:59:09