Image Upload With Preview and Delete Option - Javascript/Jquery

Image Upload with preview and Delete option - Javascript / Jquery

Try adding this : .click(function(){$(this).remove();});. It will remove the image by clicking it.

EDIT Improved version included.

EDIT 2 Since people keep asking, please see this answer on manually deleting a file from a FileList (spoiler: it's not possible...).

$(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();          });                    // Old code here          /*$("<img></img>", {            class: "imageThumb",            src: e.target.result,            title: file.name + " | Click to remove"          }).insertAfter("#files").click(function(){$(this).remove();});*/                  });        fileReader.readAsDataURL(f);      }    });  } else {    alert("Your browser doesn't support to File API")  }});

input[type="file"] {  display: block;}.imageThumb {  max-height: 75px;  border: 2px solid;  padding: 1px;  cursor: pointer;}.pip {  display: inline-block;  margin: 10px 10px 0 0;}.remove {  display: block;  background: #444;  border: 1px solid black;  color: white;  text-align: center;  cursor: pointer;}.remove:hover {  background: white;  color: black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="field" align="left">  <h3>Upload your images</h3>  <input type="file" id="files" name="files[]" multiple /></div>

Delete image preview before upload

Multiple input type file return a read-only fileList. It contains a collection of File objects. Therefore u can't simply remove an element from this list.

You have to use AJAX to handling the Form. Referthis question.

Upload multiple images with preview and delete them after click

Delegate:

function previewImage(e, selectedFiles, imagesArray) {
  const elemContainer = document.createElement('div');
  elemContainer.setAttribute('class', 'item-images');
  for (let i = 0; i < selectedFiles.length; i++) {
    imagesArray.push(selectedFiles[i]);
    const imageContainer = document.createElement('div');
    const elem = document.createElement('img');
    elem.setAttribute('src', URL.createObjectURL(selectedFiles[i]));
    elem.setAttribute('class', 'item-photo__preview')
    const removeButton = document.createElement('button');
    removeButton.setAttribute('type', 'button');
    removeButton.classList.add('delete');
    removeButton.dataset.filename = selectedFiles[i].name,
    removeButton.innerHTML = '<span>×</span>'
    imageContainer.appendChild(elem);
    imageContainer.appendChild(removeButton);
    elemContainer.appendChild(imageContainer);
  }
  return elemContainer;
}
let item_images = [];
document.getElementById('photo-upload').addEventListener('change', (e) => {
  let selectedFiles = e.target.files;
  const photoPreviewContainer = document.querySelector('#photo-upload__preview');
  const elemContainer = previewImage(e, selectedFiles, item_images);
  photoPreviewContainer.appendChild(elemContainer);
});

document.getElementById('photo-upload__preview').addEventListener('click', (e) => {
  const tgt = e.target.closest('button');
  if (tgt.classList.contains('delete')) {
    tgt.closest('div').remove();
    const fileName = tgt.dataset.filename
    item_images = item_images.filter(img => img.name != fileName)
  }
})

.item-photo__preview {
  width: 150px;
  height: 150px;
}

<div class="item-upload">
  <input id="photo-upload" type="file" multiple/>
  <div id="photo-upload__preview" class="upload-preview"></div>
</div>

Multiple image upload with preview and delete option using jQuery

You won't be able to do it this way as a FileList is read-only, meaning that you can't remove one file out of the selected files from that object. You can read it, loop over it, but you can't change the selection.

Have a look at this answer for more detailed info: How to remove one specific selected file from input file control

The suggested workaround is to use the FileReader API, but the browser support is less than ideal.

delete button on image upload with preview

check this https://jsfiddle.net/dp722j27/10/

you can have a delete method like this

function deleteImage() { 
    var index = Array.from(document.getElementById('list').children).indexOf(event.target.parentNode)
    document.querySelector("#list").removeChild( document.querySelectorAll('#list span')[index]);
    totalFiles.splice(index, 1);
    console.log(totalFiles)
}

and your render method like

  var span = document.createElement('span');
  span.innerHTML = ['<img width=100 class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>', "<button onclick='deleteImage()'>delete</button>"].join('');

  document.getElementById('list').insertBefore(span, null);

you can store the values in an array and handle it like

Image Upload With Preview and Delete Option - Javascript/Jquery