jquery multiple Image Upload with preview and Delete using PHP

jquery multiple Image Upload with preview and Delete using PHP

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

jquery multiple Image Upload with preview and Delete using PHP

There are the Following The simple About jquery multiple Image Upload with preview and Delete using PHP Full Information With Example and source code.

Read Also:  Laravel Update Multiple Records using Laravel 5.8

As I will cover this Post with live Working example to develop upload multiple images in php with preview, so the ajax multiple file upload form using jquery demo for this example is following below.

HTML – Upload Multiple Images

index.php

<div class="dsp container">
  <form action="method" name="upload-file" id="multiple-files-upload" enctype="multipart/form-data">
    <div class="row">              
      <div class="col-lg-12 pakainfo">                    
                <div class="input-group">
                  <input type="file" name="products_uploaded[]" id="products_uploaded" class="form-control" value="Upload" multiple="multiple"> 
                  <span class="input-group-btn">
                    <button type="submit" name="submit" id="submit" class="btn btn-primary dsp" type="button">Upload!</button>
                  </span>
                </div>
            </div>
      <div class="col-lg-12 text-center" id="display_product_list"><ul></ul></div>
    </div>
  </form>
</div>

JavaScript Part

preview.js

$(function () {
    var input_file = document.getElementById('products_uploaded');
    var remove_products_ids = [];
    var product_dynamic_id = 0;
    $("#products_uploaded").change(function (event) {
        var len = input_file.files.length;
        $('#display_product_list ul').html("");
        
        for(var j=0; j<len; j++) {
            var src = "";
            var name = event.target.files[j].name;
            var mime_type = event.target.files[j].type.split("/");
            if(mime_type[0] == "image") {
              src = URL.createObjectURL(event.target.files[j]);
            } else if(mime_type[0] == "video") {
              src = 'icons/video.png';
            } else {
              src = 'icons/file.png';
            }
            $('#display_product_list ul').append("<li id='" + product_dynamic_id + "'><div class='ic-sing-file'><img id='" + product_dynamic_id + "' src='"+src+"' title='"+name+"'><p class='close' id='" + product_dynamic_id + "'>X</p></div></li>");
            product_dynamic_id++;
        }
    });
    $(document).on('click','p.close', function() {
        var id = $(this).attr('id');
        remove_products_ids.push(id);
        $('li#'+id).remove();
        if(("li").length == 0) document.getElementById('products_uploaded').value="";
    });
    $("form#multiple-files-upload").submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        formData.append("remove_products_ids", remove_products_ids);
        $.ajax({
              url: 'upload.php',
              type: 'POST',
              data: formData,
              processData: false, 
              contentType: false,
              
              success: function(data) {
                 $('#display_product_list ul').html("<li class='text-success'>Files uploaded successfully!</li>");
                 $('#products_uploaded').val("");
              },
              error: function(e) {
                  $('#display_product_list ul').html("<li class='text-danger'>Something wrong! Please try again.</li>");                    
              }    
        });
    });
});

PHP – Upload Multiple Images with Live Preview

upload.php

<?php
if(isset($_FILES) && !empty($_FILES)) {
  $remove_products_ids = array();
  if(isset($_POST['remove_products_ids']) && !empty($_POST['remove_products_ids'])) {
    $remove_products_ids = explode(",", $_POST['remove_products_ids']);
  }
  for($i=0; $i<sizeof($_FILES['products_uploaded']['name']); $i++) {
    if(!in_array($i, $remove_products_ids)) {
      if($_FILES['products_uploaded']['name'][$i] != "") {
        $path = "uploaded-contents/".$_FILES['products_uploaded']['name'][$i];
        copy($_FILES['products_uploaded']['tmp_name'][$i], $path); 
      }
    }
  }
}
?>

Web Programming Tutorials Example with Demo

Read :

Read Also:  how to insert data using ajax in laravel with datatables?

Summary

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

I hope you get an idea about jquery multiple Image Upload with preview and Delete using PHP.
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.

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

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