jquery easy UI + Spring MVC(注解) 完成文件上传操作
2016-04-26 10:23
661 查看
从网上查了很多资料，发现全部是要么 是直接表单上传，要么就不支持注解形式。所以自己弄了一份这个实例，做个记录，也希望帮到同样需求的人。
前提，项目已经配置好SpringMVC注解的框架
jsp页面
<head>
<meta charset="UTF-8">
<title>部署管理</title>
<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.4.5/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.4.5/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.4.5/demo/demo.css" />
<script type="text/javascript" src="../../jquery-easyui-1.4.5/jquery.min.js"></script>
<script type="text/javascript" src="../../jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jquery-easyui-1.4.5/ajaxfileupload.js"></script>
</head>
<script type="text/javascript">
//部署
function deploy(){
$("#deployForm").form('submit',{
success: function(result){
if(result){
alert(result);
}
}
});
}
</script>
<form id="deployForm" action="${pageContext.request.contextPath}/deploy/deploy.do" method="post"
enctype="multipart/form-data">
用户名: <input id="userID" class="easyui-textbox" style="width:80px" name = "name" value="孙浩">
<input id="deployFileIPT" name="myfiles" class="easyui-filebox" style="width:300px;" onclick="mc()"/>
<a href="#" onclick="deploy()" class="easyui-linkbutton" iconCls="icon-add">部署</a>
</form>
后台
@Controller
@RequestMapping("/deploy")
public class DeployController {
/**
* 这里这里用的是MultipartFile[] myfiles参数,所以前台就要用<input type="file" name="myfiles"/>
* 上传文件完毕后返回给前台[0`filepath],0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
*/
@RequestMapping("/deploy")
public String deploy(@RequestParam String name,@RequestParam MultipartFile[] myfiles,HttpServletRequest request,
HttpServletResponse response) throws IOException {
System.out.println("部署!!"+name);
//如果用的是Tomcat服务器，则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
//这里实现文件上传操作用的是commons.io.FileUtils类,它会自动判断/upload是否存在,不存在会自动创建
String realPath = request.getSession().getServletContext().getRealPath("/upload");
//设置响应给前台内容的数据格式
response.setContentType("text/plain; charset=UTF-8");
//设置响应给前台内容的PrintWriter对象
PrintWriter out = response.getWriter();
//上传文件的原名(即上传前的文件名字)
String originalFilename = null;
//如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解
//如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且要指定@RequestParam注解
for(MultipartFile myfile : myfiles){
if(myfile.isEmpty()){
out.print("1`请选择文件后上传");
out.flush();
return null;
}else{
originalFilename = myfile.getOriginalFilename();
System.out.println("文件原名: " + originalFilename);
System.out.println("文件名称: " + myfile.getName());
System.out.println("文件长度: " + myfile.getSize());
System.out.println("文件类型: " + myfile.getContentType());
System.out.println("========================================");
try {
//这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉
//此处也可以使用Spring提供的MultipartFile.transferTo(File dest)方法实现文件的上传
FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(realPath, originalFilename));
} catch (IOException e) {
System.out.println("文件[" + originalFilename + "]上传失败,堆栈轨迹如下");
e.printStackTrace();
out.print("1`文件上传失败，请重试！！");
out.flush();
return null;
}
}
}
// try {
// //这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉
// //此处也可以使用Spring提供的MultipartFile.transferTo(File dest)方法实现文件的上传
// FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(realPath, originalFilename));
// } catch (IOException e) {
// System.out.println("文件[" + originalFilename + "]上传失败,堆栈轨迹如下");
// e.printStackTrace();
// out.print("1`文件上传失败，请重试！！");
// out.flush();
// return null;
// }
//此时在Windows下输出的是[D:\Develop\apache-tomcat-6.0.36\webapps\AjaxFileUpload\\upload\愤怒的小鸟.jpg]
//System.out.println(realPath + "\\" + originalFilename);
//此时在Windows下输出的是[/AjaxFileUpload/upload/愤怒的小鸟.jpg]
//System.out.println(request.getContextPath() + "/upload/" + originalFilename);
//不推荐返回[realPath + "\\" + originalFilename]的值
//因为在Windows下<img src="file:///D:/aa.jpg">能被firefox显示,而<img src="D:/aa.jpg">firefox是不认的
out.print("0`" + request.getContextPath() + "/upload/" + originalFilename);
out.flush();
return null;
}
}
前提，项目已经配置好SpringMVC注解的框架
jsp页面
<head>
<meta charset="UTF-8">
<title>部署管理</title>
<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.4.5/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.4.5/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.4.5/demo/demo.css" />
<script type="text/javascript" src="../../jquery-easyui-1.4.5/jquery.min.js"></script>
<script type="text/javascript" src="../../jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jquery-easyui-1.4.5/ajaxfileupload.js"></script>
</head>
<script type="text/javascript">
//部署
function deploy(){
$("#deployForm").form('submit',{
success: function(result){
if(result){
alert(result);
}
}
});
}
</script>
<form id="deployForm" action="${pageContext.request.contextPath}/deploy/deploy.do" method="post"
enctype="multipart/form-data">
用户名: <input id="userID" class="easyui-textbox" style="width:80px" name = "name" value="孙浩">
<input id="deployFileIPT" name="myfiles" class="easyui-filebox" style="width:300px;" onclick="mc()"/>
<a href="#" onclick="deploy()" class="easyui-linkbutton" iconCls="icon-add">部署</a>
</form>
后台
@Controller
@RequestMapping("/deploy")
public class DeployController {
/**
* 这里这里用的是MultipartFile[] myfiles参数,所以前台就要用<input type="file" name="myfiles"/>
* 上传文件完毕后返回给前台[0`filepath],0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
*/
@RequestMapping("/deploy")
public String deploy(@RequestParam String name,@RequestParam MultipartFile[] myfiles,HttpServletRequest request,
HttpServletResponse response) throws IOException {
System.out.println("部署!!"+name);
//如果用的是Tomcat服务器，则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
//这里实现文件上传操作用的是commons.io.FileUtils类,它会自动判断/upload是否存在,不存在会自动创建
String realPath = request.getSession().getServletContext().getRealPath("/upload");
//设置响应给前台内容的数据格式
response.setContentType("text/plain; charset=UTF-8");
//设置响应给前台内容的PrintWriter对象
PrintWriter out = response.getWriter();
//上传文件的原名(即上传前的文件名字)
String originalFilename = null;
//如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解
//如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且要指定@RequestParam注解
for(MultipartFile myfile : myfiles){
if(myfile.isEmpty()){
out.print("1`请选择文件后上传");
out.flush();
return null;
}else{
originalFilename = myfile.getOriginalFilename();
System.out.println("文件原名: " + originalFilename);
System.out.println("文件名称: " + myfile.getName());
System.out.println("文件长度: " + myfile.getSize());
System.out.println("文件类型: " + myfile.getContentType());
System.out.println("========================================");
try {
//这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉
//此处也可以使用Spring提供的MultipartFile.transferTo(File dest)方法实现文件的上传
FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(realPath, originalFilename));
} catch (IOException e) {
System.out.println("文件[" + originalFilename + "]上传失败,堆栈轨迹如下");
e.printStackTrace();
out.print("1`文件上传失败，请重试！！");
out.flush();
return null;
}
}
}
// try {
// //这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉
// //此处也可以使用Spring提供的MultipartFile.transferTo(File dest)方法实现文件的上传
// FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(realPath, originalFilename));
// } catch (IOException e) {
// System.out.println("文件[" + originalFilename + "]上传失败,堆栈轨迹如下");
// e.printStackTrace();
// out.print("1`文件上传失败，请重试！！");
// out.flush();
// return null;
// }
//此时在Windows下输出的是[D:\Develop\apache-tomcat-6.0.36\webapps\AjaxFileUpload\\upload\愤怒的小鸟.jpg]
//System.out.println(realPath + "\\" + originalFilename);
//此时在Windows下输出的是[/AjaxFileUpload/upload/愤怒的小鸟.jpg]
//System.out.println(request.getContextPath() + "/upload/" + originalFilename);
//不推荐返回[realPath + "\\" + originalFilename]的值
//因为在Windows下<img src="file:///D:/aa.jpg">能被firefox显示,而<img src="D:/aa.jpg">firefox是不认的
out.print("0`" + request.getContextPath() + "/upload/" + originalFilename);
out.flush();
return null;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery - ajax url路径问题
- jquery.cookie.js 的配置
- jquery的extend方法
- Jquery - Javascript 基本问题汇总
- jQuery ajax序列化函数
- jquery 扩展编写及时更新
- jQuery Mobile页面返回不需要重新get
- jQuery 中的 DOM 操作
- Jquery attr与prop区别
- jQuery ajax中的get请求方法汇总
- jQuery 中的 DOM 操作
- jQuery Mobile页面返回不需要重新get
- JQuery插件Marquee.js实现无缝滚动效果
- jQuery siblings()用法实例详解
- 无需 Flash 使用 jQuery 复制文字到剪贴板
- JQuery给select添加/删除节点的实现代码
- jQuery javascript获得网页的高度与宽度的实现代码
- 基于Jquery插件实现跨域异步上传文件功能
- jQuery 字符串替换（默认只替换第一个，本方法替换全部）
- jQuery html5Validate基于HTML5表单验证插件