通过javascript或jquery获取多个文件值无法正常工作

Question

I am trying to send images on server using jquery and ajax method. I want to upload multiple files but I am not able to get it properly.

My html codes,

<input type="file" name="imgs" multiple class="form-control floating-label" placeholder="">

my jquery codes,

var imgData = new FormData();
imgData.append('uid', user_id);
imgData.append('o_img', $('input[name="imgs"]').get(0).files);
$.ajax({
            url : CDN_HOST + "index.php?action=upload",
            type: "POST",
            data : imgData,
            enctype: 'multipart/form-data',
            contentType: false,
            processData: false,
            success: function(data, textStatus, jqXHR)
            {

                if(jqXHR.status == 200){


                    if(data.error == 'true'){

                       alert'(true'); 
                    }else 
                    if(data.error == 'false'){
                        alert('false')

                    }else{
                        alert(JSON.stringify(data));

                    }

                }else{
                    alert('Some error');
                }

            },
            error: function (jqXHR, textStatus, errorThrown)
            {

                //$('html').html();
                $('html').html(jqXHR.responseText);
                //$('html').html(JSON.stringify(jqXHR));

            }
        });

my php codes are,

if($_POST["o_img"]){

        $_response = $_POST['o_img'];               

}
header('Content-Type: application/json');

echo json_encode($_response);

The response in json I am getting is "[object FileList]". If I use $_FILES['o_img'], I am getting undefined variable. Can anyone tell me how can I use jquery or javascript to get multiple files and send it to server via ajax post?

Thank you for your time in advance. :D

Answer 1

Just use following method to simplify your post method

 var formData = new FormData($("form#Form Id")[0]);   // Mention here your form ID
    function save_from() {
        $.ajax({
            type: "POST",
            url: "/", // url goes here 
            data: formData,
            success: function(data) {
               //Your Code Goes here
            },
            cache: false,
            contentType: false,
            processData: false
        }); 
}

Sample Form

 <form action="" id="Form ID" method="post" enctype="multipart/form-data">
      <input type="file" name="imgs" multiple >   
      <input type="button" value="submit" onclick="save_from()" >   
 </form>