一个ajax中的数据和文件 - 如何处理JS FormData发出的帖子

时间:2015-03-03 12:33:06

标签: php jquery ajax file-upload

我正在努力解决一个问题。我用过这个帖子的例子

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

Firebug返回

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在浏览器新标签页中返回

 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 localhost上运行它 - 但这不应该是我认为的问题吗?

2 个答案:

答案 0 :(得分:0)

我认为我找到了答案 - 新标签正在处理帖子数据,因此无法通过点击“在firebug中的新标签页中打开”在新标签中以这种方式显示...

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

答案 1 :(得分:0)

您的代码已更新

<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调用不要在标题中发送contentType。您需要告诉您要在标头中发送multipart / form-data的ajax调用。然后是processData:true,默认情况下会将FormData对象合并到您的查询字符串中。

获取其他表单数据的唯一原因是因为您使用的表单创建FormData对象&#34;提交&#34;。