ajaxFileUpload的使用

   最近在做一个微商城的项目涉及到一个图片的上传,起初是用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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值