我正在尝试使用AJAX提交表单,该表单包含两个变量和多个输入type="file"
如果以经典方式提交表单,表单应能正常工作。
但是,当我尝试对其进行AJAX时,$_FILES[]数组在.php一侧显示为空。
我已经尝试了所有我知道的东西,但是没有用。

这是代码:

的HTML

<form action="ajax/process.php" enctype="multipart/form-data" method="post" id="admUploadImg">
<input type="hidden" name="postOp" value="adm-upload-img">
<input type="hidden" name="pid" value="<?= $prodData['id'] ?>">
<div class="row my-2 mx-0 justify-content-center">
    <div class="col-12 col-sm-2 tb-1 text-left text-sm-right">Imagini
        <label for="admProdImgs" class="btn btn-success btn-sm p-0 alert-success tip mb-1" title="Adauga imagini"><span class="icon-plus"></span></label>
        <input type="file" multiple id="admProdImgs" name="productImgs[]" class="filestyle invisible" data-form="admUploadImg" required accept="image/jpeg,image/png">
    </div>
</div>




Java脚本

$('#admUploadImg').submit(function(e){
    e.preventDefault();
    var formData = new FormData(this);
    $.post('ajax/process.php', formData, function(response){
        console.log(response);
    });
    console.log(formData);
});


但是,这会产生以下错误:

TypeError: 'append' called on an object that does not implement interface FormData.


因此,我将AJAX更改为:

$('#admUploadImg').submit(function(e){
    e.preventDefault();
    var formData = $('#admUploadImg').serialize();
    $.post('ajax/process.php', formData, function(response){
        console.log(response);
    });
    console.log(formData);
});


但是这一次,$_FILES[]数组为空。
这让我发疯,我不知道为什么它不起作用。帮帮我!

最佳答案

这个例子基于我的使用,对我有用。我建议制作一个按钮或类似的东西,因为似乎没有任何可视元素可供用户用来提交表单(尽管这可能是故意的)。



<form enctype="multipart/form-data" id="admUploadImg" method="post">
    <input type="hidden" name="postOp" value="adm-upload-img" />
    <input type="hidden" name="pid" value="<?= $prodData['id'] ?>" />
    <div class="row my-2 mx-0 justify-content-center">
        <div class="col-12 col-sm-2 tb-1 text-left text-sm-right">Imagini
            <label for="admProdImgs" class="btn btn-success btn-sm p-0 alert-success tip mb-1" title="Adauga imagini"><span class="icon-plus"></span></label>
            <input type="file" multiple id="admProdImgs" name="productImgs[]" class="filestyle invisible" data-form="admUploadImg" required accept="image/jpeg,image/png">
        </div>
        <button id="go">Upload</button>
    </div>
</form>





由于您使用的是Ajax而不是使用传统的HTML上载表单,因此您将希望删除action="ajax/process.php"属性。这样可以防止表单以传统方式提交。这是JavaScript。



$("#go").click(function() {
    var f = $("#admUploadImg")[0];
    var form_data = new FormData(f);

    var file_data = $("#admProdImgs").prop("files");
    $.each(file_data, function(index, value) {
        form_data.append("productImgs", file_data[index]);
    });
    // unsure about this part, maybe try "productImgs[]" if the above doesn't work

    $.ajax({
        type: "post",
        url: "ajax/process.php",
        dataType: "text",
        contentType: false,
        processData: false,
        success: function (result) {
            console.log(result);
        }
    });
    console.log(form_data);
});





我已将上述JavaScript更改为按钮.click()#go事件。我还切换到了.ajax()呼叫而不是.post()呼叫。您不会认为dataType: "text"会起作用,但是那对我有用。我在自己的网站上使用的几乎是同一件事,仅我的表单仅包含3个单独的<input type="file" />元素。我尝试实现.each()以遍历用户可能选择的所有文件。

10-06 16:18
查看更多