ajax中的数据和文件 - 如何处理由JS FormData发送的帖子

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> 

和每一个ing会好的 - 但是当我发送这个到php，我有阅读帖子的问题。我有POST以这种形式

萤火虫返回浏览器新标签

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--) 

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回报我的问题是 - 如何在PHP阅读本？ Firebug中的浏览器在控制台中显示正确的格式数组 - $ _post和$ _files，但浏览器中的视图以这种方式显示它。我在wamp localhost上运行它 - 但那不应该是我认为的问题？

Answer 1

，我想我找到了答案 - 新的选项卡处理后的数据，所以它不能被点击后要求“在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调用不要在头中发送contentType。你需要告诉ajax调用你想在头部发送multipart/form-data。然后是默认的processData：true将FormData对象合并到查询字符串中。

您获取其他表单数据的唯一原因是您正在使用您正在“提交”的表单创建FormData对象。