Juploader 1.0 Return information exception after successfully uploading files in Google Chrome browser

In the project using the Juploader 1.0 no refresh upload file JS component, above the IE8 no problem, the code is as follows:

functioninitialuploaddirectly (Onuploadfunc, ButtonID, allowedexts) {$.juploader ({Button:buttonid , //set the button ID hereEventtype:1,//Trigger TypeAddeventbutton:buttonid,//the ID of the element to bind the event toFilenamed:buttonid + ' Divfilename ',//ID of the text box that holds the selected file pathCheckmethod:function() {returncheckform ();}, Afterchoose:function(filename) {afterupload (filename, buttonid);}, Allowedextensions:allowedexts,//set the suffix to allow uploads, preferably on the server side .                //Start uploading EventsOnupload:function(fileName) {varurl = "**.ashx"; if(Onuploadfunc! =NULL) {URL=Onuploadfunc (); } $.jbox.tip ("Uploading files, please wait!" "," Loading "); returnURL; },                //Upload Complete EventOnComplete:function(FileName, response) {//response is a JSON object, and the format can be defined at its own discretion, as in the example: {success:true, FileUrl: '}Console.log (response); if(Response. MSG = = "Success") {afteruploadcompletesuccess (response.                    addedfile.s_id, FileName); }                    Else if(Response. MSG = = "Error") {jbox.closetip (); Jbox.error ("File size cannot exceed 50M", "Error Prompt"); }                    Else{jbox.closetip (); Jbox.error (response. MSG,"Error Prompt"); }                },                //System Information Display (for example, the suffix name is not valid)ShowMessage:function(message) {jbox.tip (message),' Error '); },                //canceling an upload eventOnCancel:function(filename) {jbox.tip (filename+ ' upload Cancel. ', ' info '); },                //define your own textmessages: {upload:' Add Attachments ... ', Emptyfile:"{file} is empty, please select a file.", Invalidextension:"{file} suffix name is not valid. Only {extensions} is allowed. ", Onleave:"The file is being uploaded and if you leave now, the upload will be canceled." "}            }); }

But when using chrome (I tested version 31) browser test, although the server has received the uploaded files, and returned the JSON-formatted data object, but the foreground script always get the return value, response always {"MSG": "Error"}, Check the source code of the Jquploader and find that response is the value assigned in the exception in the try catch in the complete event, the yellow part of the code below

varComplete =function () {            Try{options.uploading=false; $(' #jUploader-file ' +options.id). Show (); Options.button.children (' Span '). Text (options.messages.upload); variframe = $ (' #jUploaderIframe ' + options.id). Get (0); //When we remove an IFRAME from Dom                //the request stops, but in IE load                //event fires                if(!iframe.parentnode) {return; }                //Fixing Opera 10.53                if((Iframe.contentdocument &&Iframe.contentDocument.body&&Iframe.contentDocument.body.innerHTML= = "false")                || (Iframe.contentWindow.document &&Iframe.contentWindow.document.body&&Iframe.contentWindow.document.body.innerHTML= = "false")) {                    //In Opera event is fired second time                    //When body.innerhtml changed from false                    //To server response approx. after 1 sec                    //When we upload file with iframe                    return; }                //iframe.contentwindow.document-for ie<7                varDoc = iframe.contentdocument?iframe.contentDocument:iframe.contentWindow.document; varresponse; Log ("InnerHTML =" +Doc.body.innerHTML);  try  {  var json = Doc.body.innerHTML.replace (/<pre> (. *) <\/pre>                    ;/g, ' $ ');                Response = eval ("(" + JSON + ")");                    }  catch  (e) {response = {"MSG": "Error" };  //throw e;  } console.log (response); //timeout added to fix busy state in FF3.6SetTimeout (function () {                    $(' #jUploaderForm ' +options.id). Remove (); $(' #jUploaderIframe ' +options.id). Remove (); }, 10);            Options.oncomplete (options.filename, response); }            Catch(e) {setTimeout (function () {                    $(' #jUploaderForm ' +options.id). Remove (); $(' #jUploaderIframe ' +options.id). Remove (); }, 10); Response= {"MSG": "Error" };            Options.oncomplete (options.filename, response); }        };

Continue debugging to find the following code in the

var json = Doc.body.innerHTML.replace (/<pre> (. *) <\/pre>/g, ' $ $ '), the JSON is always empty, but the background is actually returning a value.

Continue to view the source code, understand the basic idea of Juploader, is to create an iframe in the page, and then build an IFRAME in the Form,form action point to the upload file background server address, as follows:

$ (document.body). Append (Createiframe ()). Append (CreateForm ());

And bind the custom complete method in the OnLoad event of the IFRAME, as follows:

var function () {            var id = ' juploaderiframe ' + options.id;             var iframe = $ (' <iframe id= "' + ID + '" name= "' + ID + '" src= "javascript:false;" style= "Display:none" >< /iframe> '). Bind (' Load ', complete);             return iframe;        };

This will execute the onload event of the IFRAME when the form is loaded in the IFRAME (the use of the OnLoad event for the specific IFRAME, which can be used by Baidu itself, and not explained here).

However, during the debugging process, it is found that the onload event is always executed first, that is, the complete method in the execution of the form is not actually loaded completed, the following is the console log display content:

So the suspicion is due to the problem of code order, and then look at the specific code

In the Createiframe method:

Var

In the Upload method:

$ (document.body). Append (Createiframe ()). Append (CreateForm ());

Then adjust the code after the iframe append form, then bind IFRAME the onload event

In the Createiframe method

var iframe = $ (' <iframe id= "' + ID + '" name= "' + ID + '" src= "javascript:false;" style= "Display:none" >< /iframe> ')

Get rid of the bind load event

In the Upload method:

var ifrm = createiframe (); $ (document.body). Append (Ifrm). Append (CreateForm ()); Ifrm.bind ("Load", complete);

After this modification, upload completion event OnComplete response parameters can normally get the return value of the action page in the form

Juploader 1.0 Google (Chrome) browser to successfully upload files after the return information exception