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

Question

我正在尝试使用 jquery 和 ajax 方法在服务器上发送图像。我想上传多个文件，但无法正确获取。

我的 html 代码，

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

我的jquery代码，

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

            }
        });

我的 php 代码是，

if($_POST["o_img"]){

        $_response = $_POST['o_img'];               

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

echo json_encode($_response);

我得到的 json 响应是“[object FileList]”。如果我使用 $_FILES['o_img']，我会得到 undefined variable 。谁能告诉我如何使用 jquery 或 javascript 获取多个文件并通过 ajax post 将其发送到服务器？

感谢您提前抽出时间。 :D

Answer 1

只需使用以下方法来简化您的发布方法

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

表格示例

 <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>