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

威信党建网,张满法,家电维修视频

/*直接复制在自己的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返序列化

*/

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复