jquery image upload preview Delete option

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.

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.

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.

  Multiple Image upload preview remove option

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 :

  jquery multiple Image Upload with preview and Delete using PHP

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.

Leave a Reply

avatar
  Subscribe  
Notify of