我通过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>
我喜欢的方法如下：
方法1
<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。