只有 JQuery 使用 FormData？

Question

我正在通过 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) returns TRUE, 但是 if($_FILES) returns 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) returns

array(0) { }

方法 1 仅当我按以下方式发送数据时有效：

ajax.send("username=something&var2=somethingelse");

但我不能以这种方式包含任何文件（特别是图像）。

如果我用JQuery发送：

方法二

<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。为什么 方法 2 与 JQuery 版本工作得很好，但第一个方法失败了？

提前致谢。

Answer 1

是的，它也能正常工作，你指出的那一行不起作用，因为你在方法 #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。

只有 JQuery 使用 FormData？

Only JQuery working with FormData?

javascript

php

ajax

jquery

form-data