CODEWITHSUNDEEP
javascriptjquery
user6691112
user6691112

Reputation:

Remove button is not working

I'm trying to add preview and delete option before uploading multiple images, this is what I found:

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });            
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }

});

But while uploading all images are getting uploaded, how to resolve this? I'm using php.

Upvotes: 1

Views: 285

Answers (1)

Ivan Efremov
Ivan Efremov

Reputation: 158

Ok, i'm create example that solved your problem:

Your HTML

<form method="post" id="sendForm">
  <input type="file" id="files" multiple>
  <input type="submit">
</form>

Your JS

$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
// Array which stores all selected images
var sendData = [];

$("#files").on("change", function(e) {
  var files = e.target.files,
    filesLength = files.length;
  for (var i = 0; i < filesLength; i++) {
    var f = files[i]
    var fileReader = new FileReader();
    fileReader.onload = (function(e) {
      var file = e.target;
      $("<span class=\"pip\">" +
        "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
        "<br/><span class=\"remove\">Remove image</span>" +
        "</span>").insertAfter("#files");
      // Add all images to array
      sendData.push({file: file, url: e.target.result});

      $(".remove").click(function() {
        var self = $(this).parent().children();
        sendData.map(function(value, currentIndex, data) {
          // Remove only image which removed from preview
          if (self[0].currentSrc === value.url) {
            sendData.splice(currentIndex, 1);
          }
        });
        $(this).parent().remove();
      });

      $("#sendForm").submit(function(e) {
        // Finally post all data to your PHP url that
        $.post("your/php/url", sendData);
      });
    });
    fileReader.readAsDataURL(f);
  }
});
  } else {
    alert("Your browser doesn't support to File API")
  }
});

Upvotes: 1

Related Questions