为什么 Chrome 浏览器不支持使用 Ajax 脚本的 FormData(this)？答案

【问题标题】：Why Chrome browser not supporting FormData(this) using Ajax script?为什么 Chrome 浏览器不支持使用 Ajax 脚本的 FormData(this)？
【发布时间】：2016-03-23 22:06:42
【问题描述】：

我正在使用 Ajax 脚本将值发布到 php 文件以进行文档上传目的。
我在 wordpress 的页面模板中完成了这段代码。

下面是我的html脚本

 <form id="apply_job" action="" method="post" enctype="multipart/form-data">
   <div class="popUpSec" id="applyBox" style="display:none;">
      <div class="rows">
        <input type="file" class="inputFile" id="opn_file" name="opn_file" />
      </div>

      <div class="clear"></div>
        
      <div align="center"><input value="Apply" type="submit"  class="subsBtn" /></div>
        
      <div class="clear"></div>
   </div>
 </form>

下面是我的 Ajax 脚本

 jQuery("#apply_job").submit(function (event) {
   $.ajax({
     url: "http://example.com/file.php",
     type: "POST",
     data: new FormData(this),
     contentType: false,
     cache: false,
     processData:false,
     success: function(data)
     {
        alert(data); 
          
        if(data=="Mail sent successfully") {
          document.getElementById("apply_job").reset();
          hideAndShow('applyBox');
          return false;
        } else {
            return false;
        }
      }
    });
  });

下面是我正在使用的 PHP 脚本

 if(move_uploaded_file($_FILES["opn_file"]["tmp_name"],WP_CONTENT_DIR .'/uploads/'.basename($_FILES['opn_file']['name']))){
    $attachments = array( WP_CONTENT_DIR . '/uploads/'.$_FILES["opn_file"]["name"]);
 } else {
    echo $result = "No attachment found.";
    exit;
 }

我正在使用$attachments 变量发送带有附件的邮件。

我的问题：

$_POST 数组和 $_FILES["opn_file"]["name"] 值无法访问 Chrome 浏览器中的 php 文件。同样的代码也可以在 Firefox 中运行。

如果我在解释时遗漏了什么，请告诉我。

问题编辑部分

我在控制台部分（Chrome浏览器）看到了以下内容

响应标头

Accept-Ranges:bytes
Age:0
Connection:keep-alive
Content-Length:3
Content-Type:multipart/form-data; boundary=----ebKitFormBoundarycjW5QOMAnsUD7Y8f
Date:Thu, 17 Dec 2015 14:15:44 GMT
Server:xxxx
Via:1.1 varnish
X-Pingback:http://example.com/xmlrpc.php
X-Powered-By:PHP/5.5.9-1ubuntu4.14
X-Varnish:498399885

请求标头

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:11509
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarycjW5QOMAnsUD7Y8f
Cookie:_gat=1; _ga=GA1.2.1724306164.1450332097
Host:example.com
Origin:http://example.com
Referer:http://example.com/career-test/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36
X-Requested-With:XMLHttpRequest

请求负载

------WebKitFormBoundarycjW5QOMAnsUD7Y8f
Content-Disposition: form-data; name="file"; filename="test.docx"
Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document

------WebKitFormBoundarycjW5QOMAnsUD7Y8f--

我希望，这些新变化可能有助于找到任何解决方案..

【问题讨论】：

既然您已经在使用jQuery，为什么不尝试通过serializing 发送您的数据@ 带有serialize 的表单
@xpy 我也试过了。但是，没有运气。而且我也尝试过使用静态数据......比如{ key1: 'value1', key2: 'Value2' }。没有什么对我有用。 :(
我怀疑你的问题可能出在其他地方，你确定你的js代码执行没有错误吗？控制台说什么？ alert(data); 说什么？此外，您可以查看chrome developer，在network 选项卡上，您可以查看您对服务器的请求，是否已按应有的方式发送所有内容？
是的@xpy，刚才在控制台中观察到，像Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryfVvf10M2dFDfwRuf 这样的标题行是什么边界？这是一个线索。
我真的不知道......请求的结果是什么？

标签： php jquery ajax wordpress google-chrome

【解决方案1】：

我解决了这个问题。 Chrome 在输入类型文件值的文件名上添加“C:\fakepath\”。因此，在您的 PHP 代码中，当执行“move_uploaded_file”时，目标路径将是错误的。只需要应用一个 str_replace

$tmp_name = $_FILES["pictures"]["tmp_name"][$key];
$name = $_FILES["pictures"]["name"][$key];
$name = str_replace( "C:\\fakepath\\", "", $name );
move_uploaded_file($tmp_name, "$uploads_dir/$name");

【讨论】：