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.

  How to integrate whatsapp Api php for send and receive message in bulk

Example 1: remove file from file upload jquery

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.


Download Project Scripts

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 :

  Laravel Multiple Authentication Example

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Fresher PHP WEB Developer Salary Range Level
  2.   Class HTML not found laravel
  3.   Add or Remove Table Rows Dynamically in AngularJS
  4.   Laravel update multiple rows with different values
  5.   jquery multiple Image Upload with preview and Delete using PHP
  6.   Simple Ajax Upload image using jQuery PHP
  7.   Dynamically Add Or Remove DropDownLists using jQuery
  8.   how to loop through an array of objects in javascript?
  9.   JavaScript Preview Image before Upload with jQuery
  10.   Laravel Get Absolute Path Document Root Base URL

Leave a Reply

Your email address will not be published. Required fields are marked *