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.

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


<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>
      <div class="col-lg-12 text-center" id="display_product_list"><ul></ul></div>

JavaScript Part


$(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>");
    $(document).on('click','p.close', function() {
        var id = $(this).attr('id');
        if(("li").length == 0) document.getElementById('products_uploaded').value="";
    $("form#multiple-files-upload").submit(function(e) {
        var formData = new FormData(this);
        formData.append("remove_products_ids", remove_products_ids);
              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>");
              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


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 :

Also Read This πŸ‘‰   Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP


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.