SpingMvc 结合Huploadify 进行异步上传图片

最新推荐文章于 2024-03-28 09:39:03 发布

王梓V

最新推荐文章于 2024-03-28 09:39:03 发布

阅读量1.3k

点赞数 2

分类专栏： Java后台页面端文章标签： springMvc Huploadify

Java后台同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

页面端

5 篇文章 0 订阅

订阅专栏

刚开始采用的是uploadify 插件集成的 springMvc 但是后来发现 uploadify会受到flash的限制，会产生跨域问题。然后就换成了Huploadify 插件。解决的由flash控件引起的跨域问题。下面来说下具体实现。

首先在你的springMvc里面加入这个配置。具体配置含义可以百度。

然后是

后台java 代码

配置两个值即可：1，配置你的上传图片路径

2.配置返回值，一般是配置上传后的图片路径

@RequestMapping(value = "/upload")
@ResponseBody
public String upload(HttpServletRequest request, HttpServletResponse response) throws Exception{
String filePath = " ";//请配置你的图片存储地址
String fileName="";
try {
// String savePath = "C://uploads/";
File dirPath = new File(filePath);
if (!dirPath.exists()) {
dirPath.mkdirs();
}
// 解析器解析request的上下文
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
// 先判断request中是否包涵multipart类型的数据，
if (multipartResolver.isMultipart(request)) {
// 再将request中的数据转化成multipart类型的数据
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
@SuppressWarnings("rawtypes")
Iterator iter = multiRequest.getFileNames();
while (iter.hasNext()) {
MultipartFile file = multiRequest.getFile((String) iter.next());
if (file != null) {
fileName = file.getOriginalFilename();
if(fileName.indexOf(".") != -1){
fileName =UUID.randomUUID().toString().replace("-", "")+fileName.substring(fileName.indexOf("."),fileName.length());
}
System.out.println(fileName);
File localFile = new File(filePath + fileName);
// 写文件到本地
file.transferTo(localFile);
//response.getWriter().print(fileName + " 上传成功！");
}
}
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
return returnJSON(-1,"上传失败");
}
return returnJSON(0,filePath +fileName);//配置你上传成功的返回值，。一般是返回图片路径
}

前端页面：

Huploadify Git下载地址：https://github.com/Double-Lv/Huploadify

下载后如下css和js文件在head中引入（jQuery.Huploadify.js要在jquery库文件后引入）：

Huploadify.css

jquery.Huploadify.js

$("#upload").Huploadify({
auto:true,
fileTypeExts:'*.*',
multi:false,
fileObjName:'Filedata',
fileSizeLimit:99999999999,
showUploadedPercent:false,
buttonText:'上传',
uploader:"../upload",
onUploadSuccess:function(file,data){
var dataJson = eval("(" + data + ")");
if(dataJson.code==0){ //上传成功进行操作返回值自己定义
$("#showDiv").empty();
$("#logo").val(dataJson.msg);
var html = '<img src="'+dataJson.msg+'" width="115" height="115" />';
$("#showDiv").html(html);
}else{
alert(dataJson.msg);
}
},
onUploadError:function(file,response){
jQuery.longhz.alert("上传失败!");
}
});