欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajaxFileUpload上传带参数,返回值改成json格式

程序员文章站 2022-05-13 23:38:49
/*直接复制在自己的js文件中就能使用*/ jQuery.extend({ createUploadIframe: function (id, uri) { //create frame var frameId = 'jUploadFrame' + id; if (window.ActiveXObj ......

/*直接复制在自己的js文件中就能使用*/

jquery.extend({
createuploadiframe: function (id, uri) {
//create frame
var frameid = 'juploadframe' + id;

if (window.activexobject) {
var io = document.createelement('<iframe id="' + frameid + '" name="' + frameid + '" />');
if (typeof uri == 'boolean') {
io.src = 'javascript:false';
}
else if (typeof uri == 'string') {
io.src = uri;
}
}
else {
var io = document.createelement('iframe');
io.id = frameid;
io.name = frameid;
}
io.style.position = 'absolute';
io.style.top = '-1000px';
io.style.left = '-1000px';
document.body.appendchild(io);
return io
},
createuploadform: function (id, fileelementid, data) {
//create form
var formid = 'juploadform' + id;
var fileid = 'juploadfile' + id;
var form = $('<form action="" method="post" name="' + formid + '" id="' + formid + '" enctype="multipart/form-
data"></form>');
var oldelement = $('#' + fileelementid);
var newelement = $(oldelement).clone();
$(oldelement).attr('id', fileid);
$(oldelement).before(newelement);
$(oldelement).appendto(form);
//<span style="color:#ff0000;">增加文本参数的支持,修改本处,本处应有掌声 </span>
if (data) {
for (var i in data) {
var temp = $('<input type="hidden" name="' + i + '" />');
temp.val(data[i]);
temp.appendto(form);
}
}
//set attributes
$(form).css('position', 'absolute');
$(form).css('top', '-1200px');
$(form).css('left', '-1200px');
$(form).appendto('body');
return form;
},
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()
var form = jquery.createuploadform(id, s.fileelementid, s.data);
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("ajaxstart");
}
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.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;
var status;
try {
status = istimeout != "timeout" ? "success" : "error";
// make sure that the 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 was 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]);
} 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 {
$(io).remove();
$(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 {
// var io = $('#' + frameid);
var form = $('#' + formid);
$(form).attr('action', s.url);
$(form).attr('method', 'post');
$(form).attr('target', frameid);
if (form.encoding) {
form.encoding = 'multipart/form-data';
}
else {
form.enctype = 'multipart/form-data';
}
$(form).submit();
} catch (e) {
jquery.handleerror(s, xml, null, e);
}
if (window.attachevent) {
document.getelementbyid(frameid).attachevent('onload', uploadcallback);
}
else {
document.getelementbyid(frameid).addeventlistener('load', uploadcallback, false);
}
return { abort: function () { } };
},
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).evalscripts();
//alert($('param', data).each(function(){alert($(this).attr('value'));}));
return data;
*/
//修改后返回格式给成json
var data = r.responsetext;
var start = data.indexof("{");
var end = data.indexof("}");
var jsonstr = data.substring(start, end + 1);
return (jsonstr instanceof object) ? jsonstr : eval("(" + jsonstr + ")");
}
})

/*==上面的代码直接复制在自己的js文件中就能使用==========================================================================================*/

/*js上传代码*/

$.ajaxfileupload({
type: "post",
contenttype: false,
enctype: "multipart/form-data",
url: "/url/路径",
data: { 参数名: json.stringify(参数名), 参数名: json.stringify(参数名) },//参数做json序列化(参数可以使对象、集合、字段)
secureuri: false,
fileelementid: 'file_name',
datatype: 'json',
async: false,
success: function (data) {
//关闭等待
maskutil.unmask();
if (data.issuccess) {
$.messager.alert('操作提示', data.message, 'info');
}
else {
$.messager.alert('操作提示', data.message, 'info');
}
}
});

/*个人心得

1.ajaxfileupload传参数时data:{后台接收的参数名:要传的参数对象},这里值需要做json序列化

2.ajaxfileupload返回值json格式,已在1.ajaxfileupload.js文件修改其返回值,

3.后台接收参数使用request["后台接收的参数名"],这里值需要做json返序列化

*/