functionAjaxfileuploadpic (projectid,name,type) {$.ajaxfileupload ({URL:' ${ctx}/projectpic/saveorupdate.jhtml?projectid= ' +projectid+ ' &name= ' +name+ ' &type= ' +type,//server-side request address for file uploadsSecureuri:false,//generally set to falseFileelementid: ' File ',//file upload Space id attribute <input type= "file" id= "file" name= "file"/>Type: ' Post ', DataType:' JSON ',//The return value type is generally set to JSONSuccess:function(data, status)//Server Success Response handler function { $("#picList"). DataGrid (' Reload '); $(' #uploadPicWindow '). Window (' Close '); //alert (data.msg);}, Error:function(data, status, E)//Server Response Failure handler function { $("#picList"). DataGrid (' Reload '); $(' #uploadPicWindow '). Window (' Close '); //alert (data.msg); } }); return false;}
Ajaxfileupload.js
jquery.extend ({createuploadiframe:function(ID, URI) {//Create frame varFrameid = ' Juploadframe ' +ID; variframehtml = ' <iframe id= ' + Frameid + ' "name=" ' + Frameid + ' "style=" position:absolute; top:-9999px; Left:-9999px "'; if(window. ActiveXObject) {if(typeofuri== ' Boolean ') {iframehtml+ = ' src= ' + ' + ' javascript:false ' + '; } Else if(typeofuri== ' String ') {iframehtml+ = ' src= ' + uri + ' "'; }} iframehtml+ = '/> '; JQuery (iframehtml). AppendTo (Document.body); returnJQuery (' # ' + Frameid). Get (0); }, Createuploadform:function(ID, Fileelementid, data) {//Create Form varformId = ' Juploadform ' +ID; varfileId = ' Juploadfile ' +ID; varform = JQuery (' <form action= "" method= "POST" name= "' + formId + '" id= "' + formId + '" enctype= "Multipart/form-data" &G T;</form> '); if(data) { for(varIinchdata) {JQuery (' <input type= ' hidden "name=" ' + i + ' "value=" ' + data[i] + '/> '). AppendTo (form); } } varOldelement = JQuery (' # ' +Fileelementid); varNewelement =jQuery (oldelement). Clone (); JQuery (oldelement). attr (' ID ', fileId); JQuery (Oldelement). before (newelement); JQuery (oldelement). AppendTo (form); //Set AttributesJQuery (Form). CSS (' position ', ' absolute '); JQuery (Form). CSS (' Top ', ' -1200px '); JQuery (Form). CSS (' Left ', ' -1200px '); JQuery (Form). AppendTo (' Body '); returnform; }, Ajaxfileupload:function(s) {//TODO introduce global settings, allowing the client to modify them for all requests, not only timeouts =jquery.extend ({}, jquery.ajaxsettings, s); varID =NewDate (). GetTime ()varform = Jquery.createuploadform (ID, S.fileelementid, (typeof(s.data) = = ' undefined '?false: S.data)); varIO =jquery.createuploadiframe (ID, S.secureuri); varFrameid = ' Juploadframe ' +ID; varformId = ' Juploadform ' +ID; //Watch for a new set of requests if(S.global &&! jquery.active++) {JQuery.event.trigger ("Ajaxstart" ); } varRequestdone =false; //Create the Request object varXML = {} if(S.global) JQuery.event.trigger ("Ajaxsend", [XML, S]); //Wait for a response to come back varUploadcallback =function(istimeout) {varIO =document.getElementById (Frameid); Try { if(Io.contentwindow) {Xml.responsetext= io.contentwindow.document.body?io.contentwindow.document.body.innerhtml:NULL; Xml.responsexml= Io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; }Else if(io.contentdocument) {Xml.responsetext= io.contentdocument.document.body?io.contentdocument.document.body.innerhtml:NULL; Xml.responsexml= Io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document; } }Catch(e) {Jquery.handleerror (S, XML,NULL, E); } if(XML | | istimeout = = "Timeout") {Requestdone=true; varstatus; Try{Status= istimeout! = "Timeout"? "Success": "Error"; //Make sure, the request was successful or notmodified if(Status! = "Error" ) { //process the data (runs the XML through Httpdata regardless of callback) vardata =jquery.uploadhttpdata (XML, S.datatype); //If A local callback is specified, fire it and pass it the data if(s.success) s.success (data, status); //Fire the Global callback if(S.global) JQuery.event.trigger ("Ajaxsuccess", [XML, S]); } ElseJquery.handleerror (S, XML, status); } Catch(e) {status= "Error"; Jquery.handleerror (S, XML, status, E); } //The request was completed if(S.global) JQuery.event.trigger ("Ajaxcomplete", [XML, S]); //Handle The Global AJAX counter if(S.global &&!--jquery.active) JQuery.event.trigger ("Ajaxstop" ); //Process Result if(s.complete) s.complete (XML, status); JQuery (IO). Unbind () setTimeout (function() { Try{jQuery (IO). Remove (); JQuery (Form). Remove (); } Catch(e) {Jquery.handleerror (S, XML,
NULL, E); } }, 100) XML=NULL } } //Timeout Checker if(S.timeout > 0) {setTimeout (function(){ //Check to see if the request is still happening if(!requestdone) Uploadcallback ("Timeout" ); }, S.timeout); } Try { varform = JQuery (' # ' +formId); JQuery (Form). attr (' Action ', S.url); JQuery (Form). attr (' Method ', ' POST '); JQuery (Form). attr (' Target ', Frameid); if(form.encoding) {jQuery (form). attr (' Encoding ', ' multipart/form-data '); } Else{jQuery (form). attr (' Enctype ', ' multipart/form-data '); } jQuery (Form). Submit (); } Catch(e) {Jquery.handleerror (S, XML,NULL, E); } jQuery (' # ' +Frameid). Load (uploadcallback); return{abort:function () {}}; }, Uploadhttpdata:function(r, type) {vardata =!type; Data= Type = = "xml" | | Data?R.responsexml:r.responsetext; //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 (); returndata; }, HandleError:function(S, xhr, status, E) {//If A local callback is specified, fire it if(s.error) {S.error.call (S.context||s, XHR, status, E); } //Fire the Global callback if(S.global) {(S.context? JQuery (S.context): jquery.event). Trigger ("Ajaxerror", [XHR, S, E]); } } })
Note: If there is
Jquery.handleerror is not a function
The reason is that the tested Handlererror only exist in versions prior to jquery-1.4.2, jquery-1.6 And 1.7 do not have this function, so in 1.4.2 This function copied to ajaxfileupload.js, problem solving handleerror:function (s, xhr, status, E) {//If a local callback was specified, Fire itif (s.error) {s.error.call (S.context | | s, XHR, status, E);} Fire the Global Callbackif (S.global) {(S.context jQuery (s.context): jquery.event). Trigger ("Ajaxerror", [XHR, S, E]);}, Issue 2: Always get error, unable to execute the specified success method. By tracing the execution of the ajaxfileupload, it is found that when invoking its own Uploadhttpdata function, when executing an if (type== "JSON") eval ("data =" +data), an exception is thrown, Causes the error method to be executed at the time the exception is handled by the status = "error". Internet query, learned that the Eval function is used to execute a section of the JS code, and not as I want to reverse the JSON string eval ("data =" +data), the meaning is to assign data to the data parameter, but when I return to the page is a simple string, such as "OK", The exception is thrown when this is written. The last change is eval ("data = \" "+data+" \ "), and the returned data is enclosed in double quotation marks as a string and then assigned to data. Finally succeeded ...
Jquery.form.js
Http://www.cnblogs.com/sydeveloper/p/3754637.html
http://quarterlifeforjava.iteye.com/blog/2092490
Spring MVC ajax File Upload