jquery - remove a file from input type="file" multiple through jquery

Vote count:

0

I am having a problem in file upload form using php and jquery. form can upload multiple images at a time which can be previewed in a slider with a form that consists of two more fields caption and description. slider is working through jquery. when a user selects multiple images by clicking on choose file() all the images will be shown in slider with other two fields(caption and description). each image has these two fields to add some description and caption. if a user wants to remove an image he don't want to upload he will click on remove button to remove that image (this remove button will be appended with each image) i have used .remove() function to remove an image and its two fields from the slider but the problem arises when i submit the form at server side image is removing only from the slider not from the input type="file" and its getting submitted to the server. i know input type file is "readonly" but please help me is there anyway to do this so that i can stop that removed image from uploading at server. here is the code.

html

<form action="" method="post" enctype="multipart/form-data">
 <div> 
 <input type="file" name="image[]" multiple="multiple" id="my_file" onChange="readURL(this);"/>
</div>
 <div class="pic_preview">     
  <a class="prev" href="#">Previous</a> 

  <ul>

 </ul>

  <a class="next" href="#"><b>Next</b></a>

</div>
 <div class="set">
<ul>
</ul> 
 </div>
 <button class="btns">Cancel
</button>
<button class="post_btn">Post
</button>
</form>

JQUERY

    $(".my_file").change(function() {
      readURL(this);   
    });
    function readURL(input){
  for(var i = 0; i < input.files.length; i++) { 
      if (input.files && input.files[i]) {
        var reader = new FileReader();
        reader.onload = function(e){

          $('.pic_preview ul').append("<li id="counter'+ e.target.result +'"><imgid="counter'+ e.target.result +'" style="width:500px; height:350px; border:10px;border-radius:10px;" src="' + e.target.result + '"/><input type="button"class="rem" value="remove"/></li>");

         $('.set ul').append("<li id="counter'+ e.target.result +'"><inputtype="text"name="caps[]" id="text" class="set" placeholder="Caption"/><textareaname="description[]"class="description" placeholder="description"></textarea<p><inputname="Tags[]" type="text"  id="text" class="set" placeholder="Tags"/></p></li>");};

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

};   

};
$('.pic_preview ul').bind('click', 'input', function(event){
     var removeItemID = $('input').parent("li").attr('id');
    // $("li img[id='"+removeItemID+"']").remove(); 
     $("li[id='"+removeItemID+"']").remove();
    $(".set li[id='"+removeItemID+"']").remove();
    });

      }

Please help me or suggest if there is any better approach than this. Thanks in advance

asked 1 min ago

user3456241

1