0

I am trying to upload and preview images before submit and till now I am able to select multiple images and preview them before submit. Now there are some problem I am facing. Listed below:

  1. When I click on 'x' button to remove an image, its only removing the preview and not the selected image.

  2. If I select same image twice for ex. abc.jpg, def.jpg, hij.jpg, abc.jpg then removing one abc.jpg is also removing the other abc.jpg

  3. Images are not indexed on the basis of selection. In simple words, if I select hij.jpg 1st then abc.jpg second followed by def.jpg at third position, then it should be serially indexed as 1, 2, 3 respectively.

  4. Verification for image extensions. Like only JPG, JPEG, PNG and GIF files can be uploaded.

I tried to be as clear as possible. Below are the code I am using.

HTML: 

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="newstatus" runat="server">
    <div style="display: inline-flex">
    <div style="width: 160px">
      <input type="file" name="images[]" id="file-5" class="inputfile inputfile-4" data-multiple-caption="{count} files selected" multiple />
      <label for="file-5"> 
      <span style="display: none;">Choose a file&hellip;</span></label>
      </div>
      <input type="submit" name="post" value="Post" class="post-btn" id="submit" />
    </div>
    <div style="clear:both;"></div>
    <div id="imgs"></div>
  </form>

jQuery: 

$(document).ready(function(){
     $("#file-5").on('change',function() {
     var fileList = this.files;
     for(var i = 0; i < fileList.length; i++){
          var t = window.URL || window.webkitURL;
          var objectUrl = t.createObjectURL(fileList[i]);
          $('.removeimg').fadeIn();
          $('#imgs').append('<span class="img_'+i+'" onclick="del('+i+')" style="cursor:pointer; margin-right: 3px;"><b>x</b></span><img class="img_'+i+'" src="' + objectUrl + '" width="150" height="150" style="margin-right: 3px;">');
          j = i+1;
          if(j % 3 == 0)
          {
            $('#imgs').append('<br>');
          }
        }
    });
});

// To Remove Image (but its only removing the preview and not the image)
function del(i){ 
    $('.img_'+i).fadeOut("slow", function() { $('.img_'+i).remove();});
}

Thanks in advance!

  • `FileList` object is read-only. See http://stackoverflow.com/questions/29841147/input-file-to-array-javascript-jquery/29841225#29841225 , http://stackoverflow.com/questions/38707043/delete-function-in-html-upload-form/38707244#38707244 – guest271314 Nov 03 '16 at 18:07
  • that is why I used append to insert... –  Nov 03 '16 at 18:11
  • Not sure what you mean? What is issue? `i` is not same `i` when reaching `del` function? – guest271314 Nov 03 '16 at 18:14
  • You can remove the preview, but you can't remove a file from the filelist, as you don't have access, it's read-only. You could send your own list to the server, telling it to ignore some of the images being sent, or make your own list of images etc. – adeneo Nov 03 '16 at 18:15
  • You can append files to `FormData()` object, then delete `File` from `FormData`, or convert `FileList` to array then use `.splice()` to remove `File` from array. See links for implementations of both approaches. Use a closure within `for` loop to pass same `i` to `del` function. – guest271314 Nov 03 '16 at 18:17
  • how to do? code example? –  Nov 03 '16 at 18:19
  • Code examples are at linked Questions/Answers at first comment. First link converts `FileList` to an array, then uses `.splice()` to remove file from array. Second link appends `File` objects to `FormData` then uses `FormData.prototype.delete()` to delete the `File` from `FormData` object. Use `FormData` approach to upload `FormData` after deleting `File` objects from `FormData` object. – guest271314 Nov 03 '16 at 18:20
  • Why are you building your own? Use dropzone.js or any of the other already existing js-libs, which already handles all of these problems. – junkfoodjunkie Nov 03 '16 at 18:53

0 Answers0