How to upload multiple images with ajax?

Question

I am trying to upload multiple image files. Please check out my code.

   <form id="fileupload" method="POST" enctype="multipart/form-data">
      <input type="file" name="files[]" multiple="multiple" id="images_input">
  </from>

      $(document).ready(function(){
      $('body').on('submit', '#fileupload', function(e){
        e.preventDefault();
        var files = document.getElementById("images_input").files;
        var files_array = [];
   $(files).each(function(index, value){
      files_array.push(value);
      // files_array.push(value);
   });//each
     var user_id = $("#user_id_input").val();
     var product_name = $("#product_name_input").val();
   console.log("Data",files[0]);
    var url = "../filemanager/s3_laravel/public/upload";
    $.ajax({
      url: url,
      data:{
      files:files_array, 
      user_id: user_id,
      product_name: product_name
      },
      type: 'POST',
      success: function(data){
        alert(data);
      }
  });
});

    $('#images_input').change(function(){
    $("#fileupload").submit();
  });//change

When I try to submit it I get this error https://prnt.sc/l8vmhn. Please help in this regard.

Possible duplicate of [Upload multiple image using AJAX, PHP and jQuery](https://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery) — peeebeee, Oct 22 '18 at 11:35

score 0 · Answer 1 · answered Oct 22 '18 at 11:50

0

Adding processData: false to your options object fixes the error.

answered Oct 22 '18 at 11:50

chisom okoye

17
2

Not only false, but a one-liner, too. Please be more specific in future answers. Something like "Why doesn't it work, How it actually works, example, code". – D.Schaller Oct 22 '18 at 14:26

score 0 · Answer 2 · answered Oct 22 '18 at 12:53

You need to use the FormData API. Like this.

<form id="fileupload" method="POST" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple="multiple" id="images_input">
</form>
    <script>
        $(document).ready(function(){
            $('body').on('submit', '#fileupload', function(e){
                e.preventDefault();
                var formData = new FormData();
                var files = document.getElementById("images_input").files;
                $(files).each(function(index, value){
                    formData.append('files[]', value);
                });
                formData.append('user_id', $("#user_id_input").val());
                formData.append('product_name', $("#product_name_input").val());
                var url = "../filemanager/s3_laravel/public/upload";
                $.ajax({
                    type: 'POST',
                    url: url,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(data){
                        alert(data);
                    }
                });
            });

            $('#images_input').change(function(){
                $("#fileupload").submit();
            });
    </script>

Thank you Michael for your reply. I have tried this one as well. The problem is with form data , I logged formData to the console but it is empty. Please check the screen shot. http://prntscr.com/l9a2lj — Kamran Ali, Oct 23 '18 at 05:15
That is how the FormData object will always look in the console. If you check the Network tab of the the Chrome inpector and then scroll down to the bottom of the headers, you will see the FormData object being sent in the request. — Michael H, Oct 23 '18 at 06:24

score 0 · Accepted Answer · answered Oct 23 '18 at 07:38

Finally It worked like this:

       $(document).ready(function(){
           $('#images_input').change(function(){
           $("#fileupload").submit();
           });//change
           $("#fileupload").on('submit',function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            var url = "../filemanager/s3_laravel/public/upload";
            $.ajax({
            url: url, 
            type: "POST",             
            data: formData, 
            contentType: false,        
            cache: false,           
            processData:false,       
            success: function(data) {
                console.log(data);
              }  
            });//
        });//submit
});//ready

How to upload multiple images with ajax?

3 Answers3