我正在尝试使用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()
以遍历用户可能选择的所有文件。