ajaxfileupload使用问题,贴上后台代码,用的springmvc
1.配置完成以后发现图片能正常上传,后台保存成功以后返回json数据,总是会进入到error回调函数,后来发现是ajaxfileupload.js文件问题,在返回的数据中加上了一对标签
@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] );
}
}