AjaxFileUpload SyntaxError：XML 表达式中缺少 }答案

【问题标题】：AjaxFileUpload SyntaxError: missing } in XML expressionAjaxFileUpload SyntaxError：XML 表达式中缺少 }
【发布时间】：2010-10-15 05:37:16
【问题描述】：

我正在尝试使用 $.ajaxFileUpload 上传文件。我的服务器脚本正在返回一个 json 对象，例如。

{"imgName": "test.jpg", "imgUrl": "/uploadtest/images/profile/sam.jpg"}

当我签入 Firefox 时，它会显示正确的响应。 Json 也被接收。但我仍然收到警报错误：

SyntaxError: missing } in XML expression

我不明白为什么会出现这个错误。在 firebug Json 对象中也正确显示。

<script type='text/javascript' src='/js/ajaxfileupload.js'></script>
<script type='text/javascript'>
    function doFileUpload(){
        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })
        .ajaxComplete(function(){
            $(this).hide();
        });
        $.ajaxFileUpload(
            {
            url:'/json/image/upload.html?action=saveImage&nameSpace=tot',
            secureuri:false,
            fileElementId:'imgFile',
            dataType: 'json',
            success: function (data, status){
                alert("Success: "+data.imgUrl);
                },
            error: function (data, status, e){
                alert("Error: "+e+"---URL: "+data.imgUrl);
                }
            }
        )
    }
</script>

.... ....

<div>
<strong>Upload Images:</strong><br>
<input type='file' name='imgFile' id='imgFile'>&nbsp;&nbsp;
<img src='/images/loading.gif' id='loading' height='60px' width='60px' style='display:none'>
<br><button name='upload' id='upload' onclick='return doFileUpload();'>Upload</button>
</div>

谁能告诉我错误的原因是什么？

【问题讨论】：

标签： javascript ajax

【解决方案1】：

我终于找到了问题所在。问题在于我正在使用的 Jquery 的 AjaxFileUpload 插件。而不是 dataType 中的“json”，它要求将其大写。数据类型：'JSON'。同样在修复此问题后，它会自动将

和

添加到接收到的 json 数据的开头和结尾。所以它不会被解释为广告 json。

我收到的实际数据是

<pre>{"imgName": "test.jpg", "imgUrl": "/uploadtest/images/profile/sam.jpg"}</pre>

现在我必须删除那里的标签，然后用 $.parseJson() 解析它。如果有人有同样的错误，请检查这些问题。我希望 ajaxFileUpload 插件能尽快修复。

【讨论】：

【解决方案2】：

我发现在 Mozilla 的返回数据中我遇到了这个问题。实际上，该消息是用<p>message</p> 返回的，这是一个错误。

我应用的修复是删除返回消息中不需要的任何内容，并且它正在工作。但我不确定它是否是永久修复。在 ajaxfileupload.js 脚本文件的最后我修改了uploadHttData 函数

uploadHttpData: function( r, type ) {
    var data = !type;
    var dataparsed = r.responseText.split("{"); //added by Jude
    dataparsed = dataparsed[1].split("}"); //added by Jude
    ///Commented By Jude
    ///data = type == "xml" || data ? r.responseXML : r.responseText;
    // If the type is "script", eval it in global context
    data = type == "xml" || "{ " + dataparsed[0] + " }"; //added by Jude
    if ( type == "script" )
        jQuery.globalEval( data );
    // Get the JavaScript object, if JSON is used.
    if ( type == "json" ) {
        eval( "data = " + data );
    }
    // evaluate scripts within html
    if ( type == "html" )
        jQuery("<div>").html(data).evalScripts();
                    //alert($('param', data).each(function(){alert($(this).attr('value'));}));
    return data;
}

【讨论】：

在 Safari 和 Chrome 上，json 数据返回将被包裹在
中。还需要对数据进行圣化。谢谢你解决裘德。

【解决方案3】：

我已经解决了这个问题，

只需更新代码行：

xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;

有了这个：

xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.textContent:null;

innerHTML 导致了问题。

【讨论】：

【解决方案4】：

要重新格式化响应中的 pre，您可以使用 regex(credit:https://github.com/carlcarl/AjaxFileUpload)

    if ( type == "json" )
    {
        // If you add mimetype in your response,
        // you have to delete the '<pre></pre>' tag.
        // The pre tag in Chrome has attribute, so have to use regex to remove
        var data = r.responseText;
        var rx = new RegExp("<pre.*?>(.*?)</pre>","i");
        var am = rx.exec(data);
        //this is the desired data extracted
        var data = (am) ? am[1] : "";    //the only submatch or empty
        eval( "data = " + data );
    }

我通过在 github 上搜索 ajaxfileupload 找到了 json 问题的解决方案，并发现这个版本在我将 JSON 大写后对我来说可以正常工作

【讨论】：

对我有用的是使用 Jquery eval("data = " + $(data).text()); （在最后一行）stackoverflow.com/questions/1499889/…

【解决方案5】：

如果您希望返回单维 json 响应，Jude Adeline 的回答是正确的。如果您希望从 PHP 中返回一个多维数组，请将您的代码修改为下面的代码。

uploadHttpData: function( r, type ) {
    var data = !type;
    var dataparsed = r.responseText.substr(1); //changed-added

    dataparsedLength = dataparsed.length; //changed-added
    dataparsed = dataparsed.substr(0, dataparsedLength-1); //changed-added

    data = type == "xml" || "{ " + dataparsed + " }"; //changed-added
    // If the type is "script", eval it in global context
    if ( type == "script" )
        jQuery.globalEval( data );

    // Get the JavaScript object, if JSON is used.
    if ( type == "json" ) 
        eval( "data = " + data );

    // evaluate scripts within html
    if ( type == "html" )
        jQuery("<div>").html(data).evalScripts();

    return data;
}

【讨论】：

【解决方案6】：

我遇到过这个问题 - 你只需要更改一行 if ((type == "json") || (type == "JSON")) then 在 FireFox 和 IE 中都能正常工作

【讨论】：

【解决方案7】：

我遇到了这样的错误

我用过：

$Ex=end(explot('.', image));

在doajaxfileupload.php中，报错：

“AjaxFileUpload SyntaxError：XML 表达式中缺少 }”

我改成：

$tmp=explot('.', image);
$Ex=end($tmp);

它对我有用

PHP documentation 给出了这个例子：

mixed end ( array &$array );
$fruits = array('apple', 'banana', 'cranberry');
echo end($fruits); // cranberry

【讨论】：

【解决方案8】：

要解决问题，请确保将答案的 Content-Type 设置为“text/html”。

这看起来确实很奇怪:-)

原因是 Firefox 会处理答案以构建文档。当答案的 Content-Type 是 "text/plain" Firefox 时，只显示 html，通过添加标签将答案转换为 html。

【讨论】：