Multiple Image upload preview remove option

Today, We want to share with you Multiple Image upload preview remove option.In this post we will show you Multiple image upload with preview and delete option using jQuery, hear for Multiple Image Upload with preview and delete option-php/ Ajax we will give you demo and example for implement.In this post, we will learn about multiple image upload with preview and delete option using jquery php with an example.

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

Multiple Image upload preview remove option

There are the Following The simple About Multiple Image upload preview remove option Full Information With Example and source code.

As I will cover this Post with live Working example to develop select and remove multiple images with preview before upload, so the Image Upload with Preview and Delete for this example is following below.

JavaScript

simple upload multiple images in php with preview using jQuery/javascript

<script type="text/javascript">
    function readURL(input) {
    if (input.files && input.files[0]) {
        var filesAmount = input.files.length;
        console.log(filesAmount);
        for (i = 0; i < filesAmount; i++) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var d = $('.imagePreview:first').clone()
                d.css('background-image', 'url('+e.target.result +')');
                d.html('<span class="img-delete"><b class="remove_icon">X</b></span>');
                d.hide();
                d.fadeIn(650);
                $('.member-preview').append($(d));
                $(".img-delete").click(function(){
                  $(this).parent(".imagePreview").remove();
                });
            }

            reader.readAsDataURL(input.files[i]);
        }
    }
}
$("#imageUpload").change(function() {
    readURL(this);
});
</script>

Image upload preview remove option

Full Source code for Image Upload with preview

simple Multiple File Upload with Thumbnail Preview using HTML5 and Client Side Scripts

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Image Upload with preview</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
<style type="text/css">
  body {
  background: whitesmoke;
  font-family: 'Open Sans', sans-serif;
}
.container {
  max-width: 960px;
  margin: 30px auto;
  padding: 20px;
}
h1 {
  font-size: 20px;
  text-align: center;
  margin: 20px 0 20px;
}
h1 small {
  display: block;
  font-size: 15px;
  padding-top: 8px;
  color: gray;
}
.member-upload {
  position: relative;
  max-width: 205px;
  margin: 50px auto;

}
.member-upload .member-edit {
  position: absolute;
  right: 12px;
  z-index: 1;
  top: 10px;
}
.member-upload .member-edit input {
  display: none;
}
.member-upload .member-edit input + label {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}
.member-upload .member-edit input + label:hover {
  background: #f1f1f1;
  border-color: #d6d6d6;
}
.member-upload .member-edit input + label:after {
  content: "\f040";
  font-family: 'FontAwesome';
  color: #757575;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}
.member-upload .member-preview {
  width: 192px;
  height: 192px;
  position: relative;
  border-radius: 100%;
  border: 6px solid #F8F8F8;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.member-upload .member-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.img-delete {
  display: inline-block;
  width: 34px;
  height: 34px;
      margin: 0;
    padding: 0;
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}

.remove_icon{
 padding: 5px;
 color: red;
 font-weight: 900;
   top: 10px;
  left: 0;
  right: 0;
}
</style>

  
</head>

<body>

  <div class="container">
    <h1>jQuery Image Upload 
        <small>with preview</small>
    </h1>
    <p>Multiple Image Upload with preview and delete option</p>
    <div class="member-upload">
        <div class="member-edit">
            <input type='file' id="imageUpload" multiple accept=".png, .jpg, .jpeg" />
            <label for="imageUpload"></label>
        </div>
        <div class="member-preview">
            <div class="imagePreview" style="background-image: url(https://us.123rf.com/450wm/aguiters/aguiters1508/aguiters150800059/43551287-stock-vector-photo-camera-icon.jpg?ver=6);">
            </div>
        </div>
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<script type="text/javascript">
    function readURL(input) {
    if (input.files && input.files[0]) {
        var filesAmount = input.files.length;
        console.log(filesAmount);
        for (i = 0; i < filesAmount; i++) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var d = $('.imagePreview:first').clone()
                d.css('background-image', 'url('+e.target.result +')');
                d.html('<span class="img-delete"><b class="remove_icon">X</b></span>');
                d.hide();
                d.fadeIn(650);
                $('.member-preview').append($(d));
                $(".img-delete").click(function(){
                  $(this).parent(".imagePreview").remove();
                });
            }

            reader.readAsDataURL(input.files[i]);
        }
    }
}
$("#imageUpload").change(function() {
    readURL(this);
});
</script>

</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Summary

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

I hope you get an idea about Multiple Image upload preview remove option.
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.   Creating jQuery Animation Effects using Inbuilt Methods
  2.   jQuery Ajax Upload Multiple Images using PHP
  3.   laravel 5/6/7 open link in new tab Example
  4.   laravel Redirect jQuery ajax success
  5.   jQuery Ajax Multiple File Upload Using PHP
  6.   JavaScript Preview Image before Upload with jQuery
  7.   how to upload multiple images in codeigniter?
  8.   PHP CURL POST and GET REQUEST Methods
  9.   jquery multiple Image Upload with preview and Delete using PHP
  10.   PHP Conditional Statements Example

Leave a Reply

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