我正在通过 AJAX 调用发送表单内容。
形式为:
<form id="id_of_form" enctype="multipart/form-data">
<input type="text" name="name" id="name" />
<input type="file" name="fileField" id="fileField" />
<br/><br/>
<input class="button" type="submit" value="Upload"/>
</form>
我首选的方法如下:
方法一
<script type="text/javascript">
$(document).ready(function(){
$('#id_of_form').on('submit',function(e){
e.preventDefault();
var formdata = new FormData($(this)[0]);
var ajax = new XMLHttpRequest();
ajax.open("POST", "testing.php", true);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
var returnVal = ajax.responseText;
... do stuff here ...
}
}
ajax.send(formdata);
});
});
</script>
这有点效果。在我的 PHP 中,if($_POST)
返回 TRUE,但 if($_FILES)
返回 FALSE(当名称和文件字段都包含某些内容)。当我在 PHP 中执行 var_dump($_POST)
时,它会输出以下内容:
array(312) { ["------WebKitFormBoundaryoypwTdV9MSCqJC2F Content-Disposition:_form-data;_name"]=> string(5698) ""name" qwert ------WebKitFormBoundaryoypwTdV9MSCqJC2F Content-Disposition: form-data; name="fileField"; filename="carved-coral-beads.jpg" Content-Type: image/jpeg ���� VExifMM* ���=�19(1A2_��s������i ��SA
^ 只是一个缩写 - 实际上更长。
var_dump($_FILES)
返回
array(0) { }
方法 1 仅当我通过以下方式发送数据时才有效:
ajax.send("username=something&var2=somethingelse");
但我无法以这种方式包含任何文件(特别是图像)。
如果我使用 JQuery 发送它:
方法2
<script type="text/javascript">
$(document).ready(function(){
$('#id_of_form').on('submit',function(e){
e.preventDefault();
var formdata = new FormData($(this)[0]);
$.ajax({
url: "testing.php",
type: "POST",
data: formdata,
contentType: false,
cache: false,
processData:false,
success: function(data){
... do stuff here ...
}
});
});
</script>
它工作得很好,我可以在我的 PHP 中解析内容和文件。
出于习惯,我想使用方法1。为什么 JQuery 版本的方法 2 工作得很好,但第一个方法却失败了?
提前致谢。
最佳答案
是的,它也会工作得很好,你指出的一行不起作用,因为你在方法 #1 上有一个变量拼写错误:
var formdata = new FormData($(this)[0]);
ajax.send(formData); // formdata != formData
旁注:我还无法设置演示,http://codepad.viper-7.com我认为仍然低落(至少在我这边)。稍后我可以访问时会进行设置,但这是我会使用的。
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
print_r($_FILES);
print_r($_POST);
exit;
}
?>
<form id="id_of_form" enctype="multipart/form-data">
<input type="text" name="name" id="name" />
<input type="file" name="fileField" id="fileField" />
<br/><br/>
<input class="button" type="submit" value="Upload"/>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id_of_form').on('submit',function(e){
e.preventDefault();
var formdata = new FormData($(this)[0]);
var name_value = document.getElementById('name').value;
formdata.append('name', name_value); // append value
var ajax = new XMLHttpRequest();
ajax.open("POST", document.URL, true);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
var returnVal = ajax.responseText;
console.log(returnVal);
}
}
ajax.send(formdata);
});
});
</script>
重要提示:为您上传的文件处理 $_FILES
,为您的文本输入处理 $_POST
。
关于javascript - 只有 JQuery 可以与 FormData 一起使用吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28789161/