1、按顺序导入以下js文件:
jquery-1.9.1.js
js/vendor/jquery.ui.widget.js : jQuery UI Widget
js/jquery.iframe-transport.js : 扩展iframe数据传输
js/jquery.fileupload.js : jQuery File Upload核心类
js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题
2、定义一个file:
<input type="file" name="imgfile" id="fileupload"
data-url="<%=request.getContextPath()%>/uploadFilePlug"
multiple />
<input type="text" name="imgName" id="imgName" />
3、给file标签添加事件:
$('#fileupload').fileupload(
{ //dataType: 'json',//假设这里加了dataType: 'json',则表明后台返回的为json对象,而非json格式字符串,下面可以直接这样获取返回的json对象数据:var imgName=data.result.imgName;
done : function(e, data) {//设置文件上传完毕事件的回调函数
var result = data.result[0].body ? data.result[0].body.innerHTML : data.result;//解决ie8,9下获取data.result出错问题
alert(result);
var jsondata = $.parseJSON(result);//没有指明dataType: 'json',所以后台默认返回的是json字符串,这里需要转为json对象。
alert(jsondata.imgName);
$("#imgName").val(jsondata.imgName);//此处可以稍做修改,获取上传好的图片地址,显示在用户浏览器
}
});
4、编写Controller:
@RequestMapping("/uploadFilePlug")
public @ResponseBody Map<String, Object> uploadFilePlug(@RequestParam("imgfile") MultipartFile imgfile,
HttpServletResponse response) throws IOException {
Map<String, Object> map = new HashMap<String, Object>();
System.out.println(imgfile.getOriginalFilename());
map.put("imgName", imgfile.getOriginalFilename());
return map;
}
5、springmvc返回json时,ie下面会弹出下载json框,解决方法,在springmvc配置文件中,修改为如下配置:
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<bean
class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes" value="text/html;charset=UTF-8"></property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>