数据和文件合二为一ajax - 如何处理JS FormData发送的post

Question

我正在努力解决一个问题。我使用了这个线程中的例子

Data and files in one ajax

我用了这个例子

$("form#data").submit(function(){

var formData = new FormData($(this)[0]);

$.ajax({
    url: window.location.pathname,
    type: 'POST',
    data: formData,
    async: false,
    success: function (data) {
        alert(data)
    },
    cache: false,
    contentType: false,
    processData: false
});

return false; 

});

我的示例如下所示：

HTML表格+Ajax发送

<form enctype="multipart/form-data" method="post" name="fileinfo" id="fm" action="">
    <label>Your email address:</label>
    <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
    <label>Custom file label:</label>
    <input type="text" name="filelabel" size="12" maxlength="32" /><br />
    <label>File to stash:</label>
    <input type="file" name="file" required />
    <input type="submit" value="Stash the file!" />
</form>
<div id="output"></div>



<script>
    $('#fm').on('submit', function (event) {

        event.preventDefault();

        var fd = new FormData($(this)[0]);
        fd.append("CustomField", "This is some extra data");
        $.ajax({
            url: __baseUrlWWW + "/test.php",
            type: "POST",
            data: fd,
            processData: false, // tell jQuery not to process the data
            contentType: false   // tell jQuery not to set contentType
        });

        return false;


    });

</script>

一切都会好起来的 - 但是当我将它发送到 php 时，我无法阅读 post。我有 POST 这种形式

Firebug return

Array
(
    [file] => Array
        (
            [name] => test.png
            [type] => image/png
            [tmp_name] => C:\wamp\tmp\php4E16.tmp
            [error] => 0
            [size] => 507
        )

)
Array
(
    [userid] => okok@dsada.eu
    [filelabel] => test
    [CustomField] => This is some extra data
)

HTML return 在浏览器新标签中

 Array (
[
-----------------------------318572418129603 Content-Disposition:_form - data;
_name] => "userid" okok@dsada.eu
-----------------------------318572418129603 Content-Disposition: form - data;
name = "filelabel" test
-----------------------------318572418129603 Content-Disposition: form - data;
name = "file";
filename = "b24_uam.png" Content-Type: image/png PNG IHDRHHÚőpPLTE˙˙˙UÂÓ~°IDAThíŐAV1Pß˙Ň7lOytŽşP Óü°đňúęľâzý~ŐV\˛O-e'NëC=x3,OdePú>ľ<qł-?× îX~ Wóôą|hÚžŘŇ˘äę~ŚÎÄ_ĺ;5 şÜťk[>Ë:˝^50`ŃÉSKEÖű@ö3v;wK]"kÄ[ŻSÖRyűćŢóö?ÎRy{ÂÇ^lů,á˙ż'îŘň˝Ź-\[ÓĹ(EĺdĎâeWČRÝŽš6z\°6şlÍŘËŹĽ*lÖŕáeZŮR=ĆFÓ50,5É-¨yímŠĘMđ˝1ĺ°ÔeÍ=ÔČRufGŁ`ŠËĺböđŔĺŹĄPöđČňQň-üÄđ×\°$'CvÄ÷Aay*żcÁRŮŠOďÖÝÍm)KFÍć^ [ôżŤŢŕŔčä-uz0óÚojy$_ôtSKMâkDN)¸eŠIüů#jć˝-˘ˇT¤××Žíkźů}b;] => "CustomField" This is some extra data 
#-----------------------------318572418129603-- )

我的问题是 - 如何在 php 中阅读此内容？ firebug 中的浏览器在控制台中显示正确格式的数组 - $_post 和 $_files，但浏览器中的视图以这种方式显示。我运行它在 wamp 本地主机上 - 但我认为这应该是问题所在？

Answer 1

而且我想我找到了答案 - 新标签正在处理 post 数据，因此无法通过在 post 请求上单击 "open in new tab in firebug" 以这种方式在新标签中显示。

我想我应该给自己投反对票 ;)

Answer 2

您的代码已更新

<form enctype="multipart/form-data" method="post" name="fileinfo" id="fm" action="">
    <label>Your email address:</label>
    <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
    <label>Custom file label:</label>
    <input type="text" name="filelabel" size="12" maxlength="32" /><br />
    <label>File to stash:</label>
    <input type="file" name="file" required />
    <input type="submit" value="Stash the file!" />
</form>
<div id="output"></div>



<script>
    $('#fm').on('submit', function (event) {

        event.preventDefault();

        var fd = new FormData($(this)[0]);
        fd.append("CustomField", "This is some extra data");
        $.ajax({
            url: __baseUrlWWW + "/test.php",
            type: "POST",
            data: fd,
            processData: true, // this is default so you can remove the line
            contentType: 'multipart/form-data'
        });

        return false;


    });

</script>

问题是您没有发送正确的 contentType，并且您不允许调用转换您添加到查询字符串的数据。该表单未发布，因为您返回 false，因此您没有发送您在表单中设置的用于发送文件上传的 contentType。然后告诉 ajax 调用不要在 header 中发送 contentType。您需要在 header 中告诉 ajax 您要发送 multipart/form-data 的呼叫。然后 processData: true 默认将 FormData object 合并到您的查询字符串中。

您获取其他表单数据的唯一原因是您正在使用您 "submitting".

的表单创建表单数据 object

数据和文件合二为一ajax - 如何处理JS FormData发送的post

Data and files in one ajax - How to process post sended by JS FormData

php

ajax

jquery

file-upload