0增加新文件
一、SSM框架下的文件上传和下载
ssm实现文件上传与下载 - 灰信网(软件开发博客聚合) (freesion.com)
Springmvc文件上传简介
文件上传和下载是web开发常用模块,而Springmvc作为一款优秀的web框架,对很多模块和内容进行更高度的封装和集成,而这么常用的文件上传肯定是少不了的,所以Springmvc的文件上传基于apache旗下开源的commons-fileupload和 commons-io包。将其进行二次集成和封装至Springmvc,将方法和内容封装至MultipartFile接口让我们使用起来更加方便,能够容易实现单文件、多文件上传。
1、添加依赖:
commons-fileupload
commons-io
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
</dependencies>
2、在springMVC配置文件中添加文件上传解析器
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"></property>
<property name="maxUploadSize" value="5242440"></property>
</bean>
3、controller方法:接收前端上传的文件
@RequestMapping("/fileUpload")
@ResponseBody
public void fileUpload(HttpServletRequest request, @RequestParam("file") MultipartFile file) throws IOException {
//获取session中的用户的根目录
//上传文件,获取文件信息,把文件保存在相应位置
// 获取文件名
String name=file.getName();
Long size=file.getSize();
String type=file.getContentType();
//文件路径
String path="D:/yunpan";
//上传文件名
String filename = file.getOriginalFilename();
File filepath = new File(path,filename);
//判断路径是否存在,如果不存在就创建一个
if (!filepath.getParentFile().exists()) {
filepath.getParentFile().mkdirs();
}
//将上传文件保存到一个目标文件当中
file.transferTo(new File(path + File.separator + filename));
//输出文件上传最终的路径 测试查看
System.out.println(path + File.separator + filename);
}
二、项目中实现文件的新增 ——前端
思路:
点击”新增“按钮——>跳转到新增文件的模态框——>选择文件,点击上传——>跳转到后端
步骤:
1、创建模态框——modal-file-add.jsp
2、在模态框中添加上传文件的组件
(1)用到bootstrap的一个插件bootstrap-fileinput,引入如下资源:
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js
如果要支持中文,引入:
bootstrap-fileinput/js/fileinput_locale_zh.js
<link href="static/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="static/jquery/bootstrap_3.3.0/css/fileinput.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="static/jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="static/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/jquery/bootstrap_3.3.0/js/fileinput.min.js"></script>
(2)在模态框中写上传文件的表单
<div class="modal-body">
<form id="file-upload" enctype="multipart/form-data" >
<!--这一行调用了插件fileinput,展示了一个好看的文件上传表单-->
<input id="upload-text" data-show-preview="false" name="file" type="file" >
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="upload-btn" type="button" class="btn btn-primary">上传</button>
</div>
(3)js语句修改file组件的样式:
$(function () {
initFileInput();
function initFileInput() {
$("#upload-text").fileinput({
language: 'zh', //设置语言
showRemove:false,//是否显示移除按钮
showUpload:false//是否显示上传按钮
})
}
(4)写ajax上传文件到后端
$(function () {
$("#upload-btn").click(function () {
fileupload();
}
);
function fileupload(){
var formData = new FormData($('#file-upload')[0]);
// var data = new FormData(document.getElementById('uploadForm')[0]);
$.ajax({
url:"file/fileUpload",
type:"post",
data:formData,
processData:false,
contentType:false,
success:function(data){
if(data=="1"){
alert("上传成功")
}else {
alert("上传失败")
}
}
});
}
})
报错
1、定义了js函数,但无法将bootstrap的fileinput控件修改样式,即修改语言为中文。
解决:去掉html语句中:class=‘file’