Remove selected files using jQuery

Question

Tried show selected images and remove images on click the images using jQuery.

removing image on click working fine, actually problem is it doesn't remove from the form .

$(document).ready(function() {
  /*multiple image preview first input*/

  $("#files").on("change", handleFileSelect);

  selDiv = $("#selectedFiles");
  $("#myForm").on("submit", handleForm);

  $("body").on("click", ".selFile", removeFile);

  /*end image preview */
});


var selDiv = "";
// var selDivM="";
var storedFiles = [];

function handleFileSelect(e) {

  var files = e.target.files;
  var filesArr = Array.prototype.slice.call(files);
  var device = $(e.target).data("device");
  filesArr.forEach(function(f) {

    if (!f.type.match("image.*")) {
      return;
    }
    storedFiles.push(f);

    var reader = new FileReader();
    reader.onload = function(e) {
      var html = "<div><img src=\"" + e.target.result + "\" data-file='" + f.name + "' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
      $("#selectedFiles").append(html);
    }
    reader.readAsDataURL(f);
  });

}

function handleForm(e) {
  e.preventDefault();
  var data = new FormData();

  for (var i = 0, len = storedFiles.length; i < len; i++) {
    data.append('files', storedFiles[i]);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'handler.cfm', true);

  xhr.onload = function(e) {
    if (this.status == 200) {
      console.log(e.currentTarget.responseText);
      alert(e.currentTarget.responseText + ' items uploaded.');
    }
  }

  xhr.send(data);
}

function removeFile(e) {
  var file = $(this).data("file");
  for (var i = 0; i < storedFiles.length; i++) {
    if (storedFiles[i].name === file) {
      storedFiles.splice(i, 1);
      break;
    }
  }
  $(this).parent().remove();
}

#selectedFiles img
{
  max-width: 200px;
  max-height: 200px;
  float: left;
  margin-bottom: 10px;
}
#userActions input {
  width: auto;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="index.php" id="myForm" name="myForm" enctype="multipart/form-data" method="post" accept-charset="utf-8">
  desktop:
  <input type="file" id="files" name="files" multiple>
  <div id="selectedFiles"></div>
  <br/>
</form>

see this: https://jsfiddle.net/dvy10ms7/1/

see the images

remove the image from UI, which you already have working... Also maintain a array which holds all the deleted image name or some unique identifier and then handle that is your server side.. — Rajshekar Reddy
– Rajshekar Reddy, Commented Mar 22, 2016 at 6:26
Also you can get the index of which image is removed and then manipulate the input tag value, by removing this indexed file data from the array of files in the input value — Rajshekar Reddy
– Rajshekar Reddy, Commented Mar 22, 2016 at 7:45

Thanga · Accepted Answer · 2016-03-22 07:05:09Z

This is fixed in the below snippet. jQuery has the option to remove the value of the file element as same as we do in textbox like $("#files").val("") please check.

$(document).ready(function() {
  /*multiple image preview first input*/

  $("#files").on("change", handleFileSelect);

  selDiv = $("#selectedFiles");
  $("#myForm").on("submit", handleForm);

  $("body").on("click", ".selFile", removeFile);

  /*end image preview */
});


var selDiv = "";
// var selDivM="";
var storedFiles = [];

function handleFileSelect(e) {

  var files = e.target.files;
  var filesArr = Array.prototype.slice.call(files);
  var device = $(e.target).data("device");
  filesArr.forEach(function(f) {

    if (!f.type.match("image.*")) {
      return;
    }
    storedFiles.push(f);

    var reader = new FileReader();
    reader.onload = function(e) {
      var html = "<div><img src=\"" + e.target.result + "\" data-file='" + f.name + "' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
      $("#selectedFiles").append(html);
    }
    reader.readAsDataURL(f);
  });

}

function handleForm(e) {
  e.preventDefault();
  var data = new FormData();

  for (var i = 0, len = storedFiles.length; i < len; i++) {
    data.append('files', storedFiles[i]);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'handler.cfm', true);

  xhr.onload = function(e) {
    if (this.status == 200) {
      console.log(e.currentTarget.responseText);
      alert(e.currentTarget.responseText + ' items uploaded.');
    }
  }

  xhr.send(data);
}

    
function removeFile(e) {
  var file = $(this).data("file");
  for (var i = 0; i < storedFiles.length; i++) {
    if (storedFiles[i].name === file) {
      storedFiles.splice(i, 1);
      break;
    }
  }
  $(this).parent().remove();
  $("#files").val("");
}

#selectedFiles img
{
  max-width: 200px;
  max-height: 200px;
  float: left;
  margin-bottom: 10px;
}
#userActions input {
  width: auto;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="index.php" id="myForm" name="myForm" enctype="multipart/form-data" method="post" accept-charset="utf-8">
  desktop:
  <input type="file" id="files" name="files" multiple>
  <div id="selectedFiles"></div>
  <br/>
</form>

Mo. · Accepted Answer · 2016-03-31 08:47:21Z

Hope you are happy with the solution https://jsfiddle.net/dvy10ms7/2/

$(document).ready(function() {
  $("#files").on("change", handleFileSelect);
  selDiv = $("#selectedFiles");
  $("#myForm").on("submit", handleForm);
  $("body").on("click", ".selFile", removeFile);
});

var selDiv = "";
var storedFiles = [];
function handleFileSelect(e) {
  var files = e.target.files;
  var filesArr = Array.prototype.slice.call(files);
  var device = $(e.target).data("device");
  filesArr.forEach(function(f) {

    if (!f.type.match("image.*")) {
      return;
    }
    storedFiles.push(f);

    var reader = new FileReader();
    reader.onload = function(e) {
      var html = "<div><img src=\"" + e.target.result + "\" data-file='" + f.name + "' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
      $("#selectedFiles").append(html);
    }
    reader.readAsDataURL(f);
  });

}

function handleForm(e) {
  e.preventDefault();
  var data = new FormData();

  for (var i = 0, len = storedFiles.length; i < len; i++) {
    data.append('files', storedFiles[i]);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'handler.cfm', true);

  xhr.onload = function(e) {
    if (this.status == 200) {
      console.log(e.currentTarget.responseText);
      alert(e.currentTarget.responseText + ' items uploaded.');
    }
  }

  xhr.send(data);
}

function removeFile(e) {
  var file = $(this).data("file");
  for (var i = 0; i < storedFiles.length; i++) {
    if (storedFiles[i].name === file) {
      storedFiles.splice(i, 1);
      break;
    }
  }
  $(this).parent().remove();
}

#selectedFiles img {
  max-width: 200px;
  max-height: 200px;
  float: left;
  margin-bottom: 10px;
}
#userActions input {
  width: auto;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="myForm">
  <input type="file" id="files" name="files" multiple>
  <div id="selectedFiles"></div>
  <br/>
  <input type="submit">
</form>

Collectives™ on Stack Overflow

Remove selected files using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related