SpringMVC + jquery.uploadify实现上传文件功能
程序员文章站
2023-12-18 21:40:46
前言
以前用asp.net mvc+uploadify上传文件，最近学习springmvc，所以就用springmvc+uploadify做个上传文件的demo。
刚开...
前言
以前用asp.net mvc+uploadify上传文件，最近学习springmvc，所以就用springmvc+uploadify做个上传文件的demo。
刚开始用form表单的方式提交，在controller action中用@requestparam multipartfile file就能拿到上传文件信息。后我直接使用uploadify的方式上传，接口没有做任何调整，上传的过程中报http400， 客户端的请求不符合接口的要求，表单post提交时报文参数是以form data方式，而换成uploadify时参数格式则是request payload的方式，所以把接口改写成multipartservletrequest的方式
开发环境
springmvc4、uploadify、
上传文件的话还需要下载 commons-fileupload ，同时还会下载common-io、common-logging
项目结构
普通表单上传
<form action="/user/index" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="upload"/> </form>
@requestmapping("upload")
public @responsebody string upload(@requestparam multipartfile file) throws ioexception {
string path =request.getsession().getservletcontext().getrealpath("upload");
file file=new file(path,file.getoriginalfilename());
file.transferto(file); //保存文件
return "/success";
}
uploadify上传文件
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
<title>index</title>
<link href="/2sc/uploadify/uploadify.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script src="/2sc/js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="/2sc/uploadify/jquery.uploadify.js" type="text/javascript"></script>
<style type="text/css">
#filequeue {position: absolute;bottom: 0;right: 0;}
</style>
</head>
<body>
spring mvc 上传文件
<div id="filequeue">
</div>
<input type="file" name="uploadify" id="uploadify" />
<script type="text/javascript">
$(function () {
$("#uploadify").uploadify({
'method':'post',
//指定swf文件
'swf': '/2sc/uploadify/uploadify.swf',
//后台处理的页面
'uploader': '/user/upload',
//按钮显示的文字
'buttontext': '上传图片',
//显示的高度和宽度，默认 height 30；width 120
//'height': 15,
//'width': 80,
//上传文件的类型 默认为所有文件 'all files' ; '*.*'
//在浏览窗口底部的文件类型下拉菜单中显示的文本
'filetypedesc': 'image files',
//允许上传的文件后缀
'filetypeexts': '*.gif; *.jpg; *.png',
//发送给后台的其他参数通过formdata指定
'formdata': { 'somekey': 'somevalue'},
//上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
'queueid': 'filequeue',
//选择文件后自动上传
'auto': true,
//设置为true将允许多文件上传
'multi': true
});
});
</script>
</body>
</html>
接口
@requestmapping(value = "/upload",method = requestmethod.post)
public @responsebody string upload(httpservletrequest request, httpservletresponse response){
string path =request.getsession().getservletcontext().getrealpath("upload");
multiparthttpservletrequest multiparthttpservletrequest=(multiparthttpservletrequest)request;
map<string,multipartfile> map = multiparthttpservletrequest.getfilemap();
system.out.println("path:"+path);
file file=new file(path);
if(!file.exists()){
file.mkdirs();
}
try{
for(map.entry<string,multipartfile> entity:map.entryset()){
multipartfile multipartfile=entity.getvalue();
file ff = new file(path,multipartfile.getoriginalfilename());
multipartfile.transferto(ff);
}
return "success";
}catch (exception e){
e.printstacktrace();
return "error";
}
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。