jquery image upload preview Delete option

Today, We want to share with you jquery image upload preview Delete option.In this post we will show you bootstrap multiple image upload with preview and delete, hear for multiple image upload with preview and delete option using jquery php we will give you demo and example for implement.In this post, we will learn about Image Upload with preview and Delete option – Javascript / Jquery with an example.

Free Live Chat for Any Issue

jquery image upload preview Delete option

There are the Following The simple About Simple image upload preview Delete option using JavaScript Full Information With Example and source code.

Also Read This πŸ‘‰   jquery autocomplete multiple fields with single auto-select request Best 2 Example

As I will cover this Post with live Working example to develop multiple image upload with preview and delete jquery plugin, so the preview and remove image before upload jquery for this example is following below.

Example 1: remove file from file upload jquery

index.html

<!DOCTYPE html>
<html>
<head>
<title>Image Upload with preview and Delete option - Javascript / Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
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;
}
.img-delete {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.img-delete:hover {
  background: white;
  color: black;
}
</style>
</head>
<body>


<div class="field" align="left">
  <h3>Upload your images</h3>
  <input type="file" id="multiple_files" name="files[]" multiple />
</div>

 <script>
$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#multiple_files").on("change", function(e) {
      var multiple_files = e.target.files,
        filesLength = multiple_files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = multiple_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=\"img-delete\">Remove</span>" +
            "</span>").insertAfter("#multiple_files");
          $(".img-delete").click(function(){
            $(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("|Sorry, | Your browser doesn't support to File API")
  }
});
</script>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Also Read This πŸ‘‰   window.resize javascript - How to Capture Browser Window Resize Event in JavaScript?

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about image upload preview Delete option using JavaScript.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

5/5 - (4 votes)