CODEWITHSUNDEEP
javascriptphpjqueryhtml
joe
joe

Reputation: 29

how to append multiple files input on formdata

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.com/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>

Upvotes: 1

Views: 14173

Answers (2)

sanjay sisodiya
sanjay sisodiya

Reputation: 465

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.

Upvotes: 0

Nikita Vagadiya
Nikita Vagadiya

Reputation: 104

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);
});

Upvotes: 4

Related Questions