I have to send multiple files using form data but my code is not working can anybody tell me where it is wrong.

$('#fileupload').on('change', function() {
  var to_user_id = $(this).data('touserid');
  var chat_id = $(this).data('chat_id');
  var formData = new FormData();
  $.each($('input[type=file]')[0].files, function(i, value) {
    formData.append('file[' + i + ']', value.files[0]);
  });
  //console.log(formData);
  formData.append('to_user_id', to_user_id);
  formData.append('chat_id', chat_id);
  $.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    dataType: 'json',
    processData: false,
    contentType: false,
    cache: false,
    success: function(data) {
      //console.log(data);
    }
  })
});

<script src=".3.1/jquery.min.js"></script>
<form method="post" name="upload_form" id="upload_form" enctype="multipart/form-data" action="upload.php">
  <input type="file" name="fileupload[]" id="fileupload" multiple data-touserid="'+to_user_id+'" data-chat_id="'+getdata+'">
</form>

I have to send multiple files using form data but my code is not working can anybody tell me where it is wrong.

$('#fileupload').on('change', function() {
  var to_user_id = $(this).data('touserid');
  var chat_id = $(this).data('chat_id');
  var formData = new FormData();
  $.each($('input[type=file]')[0].files, function(i, value) {
    formData.append('file[' + i + ']', value.files[0]);
  });
  //console.log(formData);
  formData.append('to_user_id', to_user_id);
  formData.append('chat_id', chat_id);
  $.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    dataType: 'json',
    processData: false,
    contentType: false,
    cache: false,
    success: function(data) {
      //console.log(data);
    }
  })
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" name="upload_form" id="upload_form" enctype="multipart/form-data" action="upload.php">
  <input type="file" name="fileupload[]" id="fileupload" multiple data-touserid="'+to_user_id+'" data-chat_id="'+getdata+'">
</form>

• javascript
• php
• jquery
• html

• Please go read How to Ask. “Not working” is not really a proper problem description. – misorude Commented Jul 24, 2019 at 11:23
• Also, show us the form that this code is operating on - minimal reproducible example – misorude Commented Jul 24, 2019 at 11:24
• formData.append has a third parameter for fileName. Provide file names as well. – user Commented Jul 24, 2019 at 11:25

2 Answers 2

You have to pass the value in the form data

$.each($('input[type=file]')[0].files, function(i, value){
    formData.append('file['+i+']', value); // change this to value
});

sample code which I used

$.each($('#upload_screenshot')[0].files,function(key,input){
formData.append('upload_screenshot[]', input);
});

Please implement below script code.

$('#fileupload').on('change', function(){
    var to_user_id = $(this).data('touserid');
    var chat_id = $(this).data('chat_id');
    var form_data = new FormData();
    var ins = document.getElementById('fileupload').files.length;
    for (var x = 0; x < ins; x++) {
        form_data.append("documentfiles[]", document.getElementById('fileupload').files[x]);
    }
    if(ins > 0)
    {
        formData.append('to_user_id', to_user_id);
        formData.append('chat_id', chat_id); 
        $.ajax({
            url: 'upload.php',, 
            dataType: 'text', 
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function (response) {

            },
        });
    }
    else
    {
        alert("Please choose the file");
    } 
});

I hope your problem will be resolved.