07文件的上传和下载

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’