Reprint http://blog.yadgen.com/?p=970
Using jquery to do upload file processing, the use of ajaxfileupload.js this third party code, but this JS is almost semi-finished products, a lot of problems. Now pack up the following and attach the repair version of the ajaxfileupload.js download.
Problem:
1: Unable to submit with parameters, can only upload files;
2: Running times: Jquery.handleerror is not a function error;
3: After successful execution, always point to Error method processing, unable to execute sucess method;
Workaround:
1: Unable to submit with parameters, can only upload files;
The original author must have this code as a practice to write, only the completion of the file submission function. You need to make some changes to your code. There are two modifications:
The first is to add a data parameter to the original createuploadform:function (ID, Fileelementid) method, and then stitch in the information in the dataset. The code is as follows:
Createuploadform:function (ID, fileelementid,data) {
//create form
var formid = ' juploadform ' + ID;
var Fileid = ' juploadfile ' + ID;
var form = jQuery (' <form action= "" method= "POST" name= "' + Formid + '" id= "' + Formid + '" enctype= "multipart/form-data "></form>");
var oldelement = jQuery (' # ' + fileelementid);
var newelement = jQuery (oldelement). Clone ();
JQuery (oldelement). attr (' id ', fileid);
JQuery (Oldelement). before (newelement);
JQuery (oldelement). appendto (form);
Additional parameter Support
if (data) {for
(var i in data) {
$ (' <input type= "hidden" name= "' + i + '" value= "' + data[i] + '/> '). Appendto (form);
}
Set attributes
jQuery (form). CSS (' position ', ' absolute ');
JQuery (Form). CSS (' top ', ' -1200px ');
JQuery (Form). CSS (' left ', ' -1200px ');
JQuery (Form). Appendto (' body ');
return form;
},
The second place is to call the Createuploadform method, as follows:
Ajaxfileupload:function (s) {
//TODO introduce global settings, allowing the client to modify them for all requests, Not only timeout
s = jquery.extend ({}, jquery.ajaxsettings, s);
var id = new Date (). GetTime ();
Modify the method
/var form = Jquery.createuploadform (ID, S.fileelementid) that adds parameters to the call;
var form = Jquery.createuploadform (ID, S.fileelementid, s.data);
var io = jquery.createuploadiframe (ID, S.secureuri);
2: Running times: Jquery.handleerror is not a function error;
This error is due to the fact that Ajaxfileupload.js was written prior to the jquery1.4.2 version and the HandleError method is not available after the jquery version, so you can copy the method in version 1.4.2 to that JS.
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]);
}
,
3: After successful execution, always point to Error method processing, unable to execute sucess method;
This is because the ajaxfileupload.js processing returns data, does not consider the background return is a string problem (even if the returned JSON format data, we also like to convert to a string to return). To modify the Uploadhttpdata method:
Get the JavaScript object, if JSON is used.
if (type = = "json") {
//If a string (JSON format string) is returned, the following error occurs, resulting in the inability to walk into the Sucess method plus "
//eval" ("data =" + data);
eval ("data =" "+data+" ");
}
Repair version Ajaxfileupload.js
Jquery.extend ({createuploadiframe:function (id, URI) {//create frame var Frameid = ' Juploadframe ' +
Id var iframehtml = ' <iframe id= ' + Frameid + ' "name=" ' + Frameid + ' "style=" position:absolute; top:-9999px;
Left:-9999px "'; if (window.
ActiveXObject) {if (typeof uri== ' Boolean ') {iframehtml = = ' src= ' + ' javascript:false ' + ' "';
else if (typeof uri== ' string ') {iframehtml + = ' src= ' + uri + ' ";
} iframehtml + = '/> ';
JQuery (iframehtml). Appendto (Document.body);
return JQuery (' # ' + Frameid). Get (0);
}, Createuploadform:function (ID, fileelementid) {//create form var formid = ' juploadform ' + ID;
var Fileid = ' juploadfile ' + ID; var form = jQuery (' <form action= "" method= "POST" name= "' + Formid + '" id= "' + Formid + '" enctype= "Multipart/form-dat
A "></form>"); var oldelement = jQuery (' # ' + fileelementid);
var newelement = jQuery (oldelement). Clone ();
JQuery (oldelement). attr (' id ', fileid);
JQuery (Oldelement). before (newelement);
JQuery (oldelement). appendto (form);
Set attributes JQuery (form). CSS (' position ', ' absolute ');
JQuery (Form). CSS (' top ', ' -1200px ');
JQuery (Form). CSS (' left ', ' -1200px ');
JQuery (Form). Appendto (' body ');
return form; }, Ajaxfileupload:function (s) {//TODO introduce global settings, allowing the client to modify them for Al
L requests, not only timeout S = jquery.extend ({}, jquery.ajaxsettings, s);
var id = new Date (). GetTime ();
var form = Jquery.createuploadform (ID, S.fileelementid);
var io = jquery.createuploadiframe (ID, S.secureuri);
var Frameid = ' juploadframe ' + ID;
var formid = ' juploadform ' + ID; Watch for a new set of requests if (S.global &&! jquery.active++) {JQuery.event.trigger ("Ajax
Start ");
var requestdone = false; CreAte the Request object var xml = {};
if (S.global) JQuery.event.trigger ("Ajaxsend", [XML, S]); Wait for a response to come back var uploadcallback = function (istimeout) {var io = document.getelemen
Tbyid (Frameid); try {if (Io.contentwindow) {xml.responsetext = Io.contentwindow.document.body?io.contentwindow.docu
Ment.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.b
Ody.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;
var status; try {status = Istimeout!= "Timeout"?
"Success": "Error";
Make sure this request was successful or notmodified if (status!= "error") { Process the data (runs the XML through Httpdata regardless of callback) VAR data
= 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 ("Ajax
Success ", [XML, S]);
else Jquery.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 toIf the request is still happening if (!requestdone) uploadcallback ("timeout");
}, S.timeout);
The try {var form = 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 () {}}; The//HandleError method is removed after jquery1.4.2, where the modification method 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]);
}, Uploadhttpdata:function (r, type) {var data =!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). evals
Cripts ();
return data; }
});