jquery+uploadify+springmvc文件上传

最新推荐文章于 2021-02-16 17:59:51 发布

原创最新推荐文章于 2021-02-16 17:59:51 发布 · 7.9k 阅读

1 ·

CC 4.0 BY-SA版权

用户体验专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用Uploadify插件结合jQuery实现文件上传功能，包括前端页面设置、JS交互逻辑及Spring MVC后端控制器的编写，展示了从选择文件到上传成功后的前端展示全过程。

由于uploadify和jquery各个版本不同，js代码和后台接受接口有点不同。

html 标签：

js代码：

/* 文件提交 */
$('#file').uploadify({
'swf' : 'rr_js/uploadify/uploadify.swf',
'uploader' : 'upload.do',
'buttonText' : '上传',
'width' : 50,
'height' : 20,
'onUploadSuccess' : function(file, data, response) {
alert('successfully uploaded ' + ':' + data);
$(".rr_peitu").css("overflow","hidden").html("<img src=\"" + data + "\" />");
}
});

spring控制器：

@RequestMapping("upload")
public void upload(HttpServletRequest request,
PrintWriter out) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
MultipartFile multipartFile =null;
String fileName = null;
for(Map.Entry<String,MultipartFile > set:fileMap.entrySet()){
String filekey = set.getKey();//Filedata
multipartFile = set.getValue();//文件名
}
fileName = this.storeIOc(multipartRequest, multipartFile);

out.print(fileName);
}

--------------------------------------------------

// 接受图片，返回图片地址
private String storeIOc(HttpServletRequest request, MultipartFile file) {
String realPath = request.getSession().getServletContext()
.getRealPath("dream_ioc");
if (file == null) {
return "dream_ioc" + File.separator + "headpic.jpg";
}
String fileName = "";
String logImageName = "";
if (file.isEmpty()) {
System.out.println("文件未上传");
} else {
String _fileName = file.getOriginalFilename();
String suffix = _fileName.substring(_fileName.lastIndexOf("."));
// /**使用UUID生成文件名称**/
logImageName = UUID.randomUUID().toString() + suffix;

fileName = realPath + File.separator + logImageName;
File restore = new File(fileName);
try {
file.transferTo(restore);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
// 返回默认的图片地址
return "dream_ioc/" + logImageName;
}