jquery ajaxfileupload图片上传返回error与ie无法上传问题

ajaxfileupload使用问题,贴上后台代码,用的springmvc
@RequestMapping(value="image")
	public void iamgeUpload(HttpServletRequest request, HttpServletResponse response, Integer proId, @RequestParam MultipartFile file){
		String path = Consts.IMG_PATH+Consts.IMG_PRODUCT;
		if(file.isEmpty()){
			JsonUtils.render(response, JsonMapper.buildNonEmptyMapper().toJson(new BaseMessage(false, "上传文件不能为空!")));
		}else{
			File f = new File(path+"/"+file.getOriginalFilename());
			if(f.exists()){
				JsonUtils.render(response, JsonMapper.buildNonEmptyMapper().toJson(new BaseMessage(false, "文件已存在!")));
			}else{
				try {
					FileUtils.saveFile(file.getInputStream(), path, f.getName());
					ShopProduct product = shopProductService.get(proId);
					ShopProductImgs img = new ShopProductImgs();
					img.setImg(Consts.IMG_PRODUCT+"/"+f.getName());
					img.setShopProduct(product);
					ShopProductImgs imgs = shopProductImgsService.save(img);
					JsonUtils.render(response, JsonMapper.buildNonEmptyMapper().toJson(new BaseMessage(true, imgs.getId()+"_"+imgs.getImg())));
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		}
	}

前端js代码:

$.ajaxFileUpload({
             url:baseURL+'product/image?proId='+id, //上传文件的服务端
             secureuri:false,  //是否启用安全提交
             dataType: 'json',   //数据类型  
             fileElementId:'pro_iamge', //表示文件域ID
             //提交成功后处理函数      html为返回值,status为执行的状态
             success: function(data,status){
				var imgId = data.message.split("_")[0];
				//var src = data.message.split("_")[1];
				var start = data.message.indexOf("_");
				var src = data.message.substring(start+1, data.message.length);
				if(status){
					var content = "<a href='${pageContext.request.contextPath}/product/imageDelete?productId="+id+"&proImgId="+imgId+"' class='slip_hover'><img src='"+src+"' class='img-polaroid pro_img' title='删除'></a>"
					$(".img_body_last").before(content);
					$(".slip_hover").sliphover({
						height:'14%'
					});
				}
             },

             //提交失败处理函数
             error: function (data,status,e){
                 alert(data.message+"==="+status);
             }
         });

1.配置完成以后发现图片能正常上传,后台保存成功以后返回json数据,总是会进入到error回调函数,后来发现是ajaxfileupload.js文件问题,在返回的数据中加上了一对标签

后来自己改了下ajaxfileupload.js 代码:

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" ){
        	var start = data.indexOf("{");
        	var end = data.indexOf("}")+1;
        	data = data.substring(start,end);
        	eval("data = "+data);
        }
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();

        return data;
    }
在type=='json'处将返回结果截取出来返回,OK成功。

2.最常见错误jQuery.handleError is not a function  改问题是由jquery版本造成,解决方法:在ajaxfileupload.js 中增加一个方法

<span style="white-space:pre">	</span>handleError: function( s, xhr, status, e ) 		{
	// If a local callback was 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.在ie中form表单无法提交,我是用按钮触发的<input type="file" />然后根据onchange事件来上传,在ie中不允许,后来将file浮动到按钮上面设置为透明的,OK成功。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值