最近在做一个微商城的项目涉及到一个图片的上传,起初是用jquery的ajax方法结果它不能解析enctype="multipart/form-data",不能成功将type=file类型的数据传交给后台。后来在$.ajax方法中加了个enctype="multipart/form-data"后但是发现发出的请求地址错误,最终放弃了用jquery ajxa的方法传送,最后选择了ajaxFileUpload的插件,虽然它你能够实现图片的上传,但其也存在着一定的bug,譬如:
①他不能支持多个图片的传输,要想支持必须在插件的源js文件中进行修改
/*
* 修改前
* var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);*/
//修改后
for(var i in fileElementId){
var oldElement = jQuery('#' + fileElementId[i]);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}
②传表单数据只能以data :{comName:comName,comPrize:comPrize,comRepertory:comRepertory,comFreight:comFreight,comType:comType,merNo : merNo}而不能以表单形式传递
③成功提交数据后接收返回数据总是进入error方法,要进入成功方法则改js源文件
//修改前
if ( type == "json" )
eval("data = "+data);//这里没有将data解析成json对象,网上有说改为eval( "data = \"" + data+"\"" );或者
eval("data = eval(" + data + ")");但我改后都未成功,直到最后看到某博客后改为下面的放成功
//修改后
if ( type == "json" ) {
以下为新增代码///
data = r.responseText;
var start = data.indexOf(">");
if(start != -1) {
var end = data.indexOf("<", start + 1);
if(end != -1) {
data = data.substring(start + 1, end);
}
}
///以上为新增代码///
eval( "data = " + data);
}
个人的上传多张图片代码
$.ajaxFileUpload({
type:'post',
url:'addWebCommodityAction!addWebCommodity',// 服务器端程序
secureuri:false,
fileElementId:['doc1','doc2','doc3','doc4','doc5'],// input框的ID
data :{comName:comName,comPrize:comPrize,comRepertory:comRepertory,comFreight:comFreight,comType:comType,merNo : merNo},
/* $("#upLoadForm").serialize() */
dataType: 'json',// 返回数据类型
beforeSend:function(){// 上传前需要处理的工作,如显示Loading...
},
success: function (data, status){// 上传成功
if(data.msg == "001"){
// 从data中获取数据,进行处理
alert("添加商品成功!");
$("#upLoadForm")[0].reset();
} else{
alert('添加商品失败!');
}
},
error:function(data,status,e){
alert("超时")
}
});
具体可参考某大神的博客,地址为http://upvup.com/html/JQuery/2014-11-15/8.html