标签：文件 07 commons js file fileinput 上传 下载
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’
标签：文件,07,commons,js,file,fileinput,上传,下载 来源： https://blog.csdn.net/rlt123456/article/details/120855715
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。