how to remove single uploaded file from jQuery in multiple file upload

Question

how to remove single uploaded file from jQuery in multiple file upload

5.2k Views Asked by Sagar Gautam At 05 April 2025 at 13:28

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.

Original Q&A

There are 3 best solutions below

**son pham** · 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>

**Abdulsattar Alkhalaf** · 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>

**Abdulsattar Alkhalaf** · 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

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

how to remove single uploaded file from jQuery in multiple file upload

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in FILE

Related Questions in MULTIPLE-FILE-UPLOAD

Trending Questions

Popular # Hahtags

Popular Questions