AjaxFileUpload SyntaxError: missing } in XML expression

I'm trying to upload a file using $.ajaxFileUpload. My server script is returning a json object eg.

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

When I check in firefox it 开发者_如何学Goshows the correct response. Json is also received. But still I'm getting an error in alert:

SyntaxError: missing } in XML expression

I couldn't understand why this error is shown up. Also in firebug Json object is shown correctly.

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

Anyone can tell me what's the reason for the Error?

I finally found the problem. The problem is with AjaxFileUpload plugin of Jquery which I'm using. Instead of 'json' in dataType it requires it to be capitalized. dataType: 'JSON'. Also after fixing this it automatically adds <pre> and </pre> to the beginning and end of the received json data. So it is not interpreted ad json.

Actual data that i received was

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

Now I'll have to remove there tags and then parse it with $.parseJson(). If anyone have the same error then check these problems. I hope ajaxFileUpload plugin will be fixed soon.

I found that with the return data in Mozila I was having this problem. Actually the message was being returned with <p>message</p> and this was giving an error.

The fix I applied was to remove anything not needed in the return message and it's working. But I'm not sure if its a permanent fix. At the end of the ajaxfileupload.js script file I modified the uploadHttData function

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;
}

I have fixed this,

Just update the code line:

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

With this one:

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

The innerHTML is causing the problem.

to reformat the pre from the response you can use 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 );
    }

i found the solution to the json problem by searching github for ajaxfileupload, and found this version which worked correctly for me once I capitalized JSON

Jude Adeline answer was correct if you were looking to return back a single dimensional json response. If you are looking to kick return a multi dimensional array from PHP, modify your code to this below.

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;
}

i have been though this problem - u need to change only one line if ((type == "json") || (type == "JSON")) then works fine in both FireFox and IE

I had an error like this

I used:

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

in doajaxfileupload.php, which gave the error:

"AjaxFileUpload SyntaxError: missing } in XML expression"

I changed it to:

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

It's worked for me

The PHP documentation gives this example:

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

To solve the problem make sure you set the Content-Type of you answer to "text/html".

That look strange indeed :-)

The reason is that the answer is processed by Firefox to build a document. When the Content-Type of the answer is "text/plain" Firefox, that only display html, convert the answer into html by adding the tags.