Spring MVC ajax File Upload

Source: Internet
Author: User
Tags new set

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.