谷歌浏览器在 AJAX 文件上传时显示错误？答案

【问题标题】：Google chrome displays error on AJAX file upload?谷歌浏览器在 AJAX 文件上传时显示错误？
【发布时间】：2013-09-03 18:44:54
【问题描述】：

我正在尝试借助 AJAX 将图像文件异步上传到服务器。该文件通过 FIREFOX 成功上传，但无法通过 Google Chrome 上传。

它显示以下错误消息：Uncaught SyntaxError, unexpected end of input

谷歌搜索导致我可能会丢失一两个括号，但我无法在我的代码中找到任何此类错误。帮忙？

代码如下：

<input type="file" name="profile_image" onchange="uploadedImage(this)"/>

function uploadedImage(image)
{
  var file = image.files[0];
  var name = file.name;
  var size = file.size;
  var type = file.type;
  var msg='';
  if(size>500000)
      msg+="File should not be greater than 500kb";
  if(type!="image/jpeg")
      msg+="Only JPEG images are currently supported";
  if(msg!='')
  {
     alert(msg);
     return;
  }   
var formData = new FormData(document.getElementById('edit_settings'));
$.ajax(
  {
    url: 'upload_demo_image.php',  //Server script to process data
    type: 'POST',
    xhr: function()
    {  // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
        return myXhr;
    },
      // Form data
    data: formData,
    //Options to tell jQuery not to process data or worry about content-type.
    cache: false,
    contentType: false,
    processData: false,
    success: function(filename)
    {
       var response = jQuery.parseJSON(filename);
       var newImage=response['filename'][0];
       $("#edit_profile_image_container").html("<img id='edit_profile_image' src='"+newImage+"' alt='Profile Image'/>");
        crop();
    }
 }
 );

}

这是从服务器返回的 JSON 数据：

{"filename":["uploadDemo\/8_demo.jpg"]}

PHP 代码：

<?php session_start();
require_once 'myfunctions.php';
if(isset($_FILES["profile_image"]["name"]))
{
$query="SELECT * FROM students WHERE email='$_SESSION[user]'";
$result=queryMysql($query);
$row=mysql_fetch_array($result);
$_FILES["profile_image"]["name"]=$row['studentid']."_demo.jpg";
$saveto="uploadDemo/$row[studentid]_demo.jpg";
$tempname=$_FILES["profile_image"]["tmp_name"];
$type=$_FILES["profile_image"]["type"];
$image_check=uploadimage($tempname,$saveto,$type,600);
$filename["filename"][]=$saveto;
header('Content-type :text/JSON');
echo json_encode($filename);
}
?>

【问题讨论】：

该错误究竟发生在哪里？ Ctrl+shift+j，单击错误旁边的向下箭头，按照右侧的跟踪，直到到达您的代码或 json 响应。
Chrome 的控制台显示错误在“jquery-1.9.1.js:541”中。在展开详细信息时，它会显示以下内容：success myfunctions.js:348
这意味着 Chrome 认为 json 无效。最有可能的是，它是正确的。获取您的 json 并将其粘贴到 json 验证器中。
我在 Jsonlint.com 上检查了 Firebug 生成的 JSON 结果。它说 JSON 是有效的！
使用为 chrome 返回的 json 执行相同的测试。另外，我建议删除var response = jQuery.parseJSON(filename); 并设置dataType: json，尽管您可能还想为您的ajax 添加一个错误处理程序。

标签： javascript jquery ajax google-chrome

【解决方案1】：

就像@Kevin 在 cmets 中所说：在php文件中删除行（我不这么认为，有必要）：

header('Content-type :text/JSON');

并在 ajax 选项中的 js 文件中添加：

dataType: 'json',

并删除此行：

contentType: false,
processData: false,

在成功函数中删除行：

var response = jQuery.parseJSON(filename);

并制作一个 console.log(filename.filename); // 第一个 'filename' 是成功函数的参数，第二个是 php 数组中的单元格名称 $filename["filename"]

【讨论】：

我已经尝试了以上所有方法，但都没有成功。请阅读我们的讨论。
contentType 和 processData 需要为 false 才能异步上传图片

【解决方案2】：

应在 formData 对象中进行如下更改：

var formData = new FormData();
formData.append("profile_image",filename);

另外，自定义 xhr 函数不是必需的。

以上更改使 Chrome 中的一切正常。

【讨论】：