0

I am working on a real estate website. I want user to upload multiple images with preview, but when I try to upload its just selecting multiple images not uploading. I used multiple tag for this but its not working

I put 'multiple' but its just selecting multiple not uploading. Anyone tell me please how I can upload multiple images

$(document).ready(function() {
  img_count = 0;
  $('#add_more_images').click(function() {
    action_id = this.id;
    var post_total_img = 0;
    var result = $(this).val().split(',');
    prefix = result[0];
    max_limit = parseInt(result[1]);
    if (img_count == 0) {
      img_count = post_total_img = parseInt($('#' + prefix + '_imgs').val());
      img_count += 1;
    } else {
      post_total_img = parseInt($('#' + prefix + '_imgs').val());
    }
    img_count += 1;
    post_total_img += 1;
    $(this).parent().before($("<div/>", {
      id: prefix + "_pic_box_" + img_count,
      class: "abcd editproperty-new-added"
    }).fadeIn('slow').append($(" <input/> ", {
        name: 'propertyimg[]',
        type: 'file',
        class: 'post-img-file',
        multiple: 'multiple'
      }), // $("<br/><br/>")
    ));
    if (post_total_img >= max_limit)
      $(this).parent().hide('slow');
    $('#' + prefix + '_imgs').val(post_total_img);
  });
  $('body').on('change', '.post-img-file', function() {
    if (this.files && this.files[0]) {
      img_id = prefix + '_pic_' + img_count;
      $(this).before("<img class='previewimg border-radius-0 mr-0' id='" + img_id + "' src = '' / > ");
      var reader = new FileReader();
      reader.onload = loadImage;
      reader.readAsDataURL(this.files[0]);
      $(this).before($("<img/>", {
        id: 'editimg',
        src: 'images/x.png',
        alt: 'delete'
      }).click(function() {
        $(this).parent().remove();
        // post_total_img--;
        var total_imgs = parseInt($('#' + prefix + '_imgs').val()) - 1;
        $('#' + prefix + '_imgs').val(total_imgs);
        $('#' + action_id).parent().show('slow');
      }));

      $(this).hide();
    }
  });
  // To preview image
  function loadImage(e) {
    $('#' + img_id).attr('src', e.target.result);
  };
  $(".delete-edit-img").click(function() {
    var result = $(this).data('value');
    result = result.split(',');
    var img_name = result[0];
    var images_array = $('#' + result[1] + '_add_more').next('p').next('input').val().split(',');
    var deletedArray = $("#delete_images").val();
    if (deletedArray == '') {
      deletedArray = img_name;
      $("#delete_images").val(deletedArray);
    } else {
      deletedArray = deletedArray + ',' + img_name;
      $("#delete_images").val(deletedArray);
    }
    var index = images_array.indexOf(img_name);
    if (index !== -1) {
      images_array[index] = '';
    }
    // if (index > -1)
    //   images_array.splice(index, 1);
    $('#' + result[1] + '_add_more').next('p').next('input').val(images_array);
    $(this).parent().remove();
    var total_imgs = parseInt($('#' + result[1] + '_imgs').val()) - 1;
    $('#' + result[1] + '_imgs').val(total_imgs);
    $('#' + result[1] + '_add_more').parent().show('slow');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="add_more_images" class="add-more-images">Add</a>
nomi
  • 33
  • 5
  • Please use the snippet I made you to create a ***[mcve]*** - there is not much working here – mplungjan Feb 02 '23 at 08:48
  • thank u dear but there is another problem...its selecting and uploading multiple images but not previewing...it previews only one image – nomi Feb 02 '23 at 09:26
  • Right now the snippet does nothing except adding an `` string to the DOM. Make it do what you say it does – mplungjan Feb 02 '23 at 09:33
  • dear check again snippet i removed the error – nomi Feb 02 '23 at 09:39
  • Please do not use "dear" - it is very weird. In English one only uses dear when one writes letters or talk to family – mplungjan Feb 02 '23 at 10:08
  • Also ` multiple: 'multiple'` on each new file input? Why? You seem to not have any upload feature. – mplungjan Feb 02 '23 at 10:12

0 Answers0