Java SpringMVC 点击图片上传文件和文件的上传、下载

最新推荐文章于 2024-04-29 05:49:50 发布

置顶人美就不要想得美

最新推荐文章于 2024-04-29 05:49:50 发布

阅读量1.2k

点赞数 3

分类专栏： SSM

本文链接：https://blog.csdn.net/chen_long_yue/article/details/90278511

版权

SSM 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如何自定义点击按钮上传图片和文件的上传、下载

首先要搭建好ssm的基本环境

导入文件上传依赖的包

<!--文件上传-->
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3.1</version>
</dependency>
<dependency>
  <groupId>commons-io</groupId>
  <artifactId>commons-io</artifactId>
  <version>2.6</version>
</dependency>

在SpringMVC配置文件中加入

<!--配置SpringMVC 文件上传的配置-->
<bean id="multipartResolver" 				                    class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
    <!--上传文件的最大大小 -->
    <property name="maxUploadSize" value="1024000"></property>
    <!--文件的字符集-->
    <property name="defaultEncoding" value="UTE-8"></property>
</bean>

上传前端的代码

<form action="upload_image.do">
    <div id="div_0" style="float: left">
        <input id="file_0" type="file" name="files" style="display: none" οnchange="replace_image(0)">
        <img id="image_0" οnclick="select_image(0)" style="cursor:pointer;padding: 5px"
             src="upload_hover.jpg" width="90px" height="90px">
    </div>
    <input type="submit" name="" id="" value="提交" style="margin-top: 70px">
</form>

文件上传时，与普通的表达上传文件不同，需要注意几个地方，首先method=post,enctype=“multipart/form-data”,这两个条件是必须的，这里的Id设置的都是有意义的，input标签的个数是未知的，所以不同的标签的ID要不同，这里使用索引的方法，每增加一个文件，将ID+1，即_后面的数字是动态变化的根据用户上传的文件个数，当用户选择一个文件上传后，我么做的是，将显示的上传按钮图片替换成我们上传的图片，此时在添加一个上image按钮

    //将用户选择的图片加载到游览器上显示出来
    function replace_image(index) {
        /*获得图片对象*/
        var blob_image = $("#file_" + index)[0].files[0];
        var url = window.URL.createObjectURL(blob_image);
        /*替换image*/
        $("#image_" + index).attr("src", url);
        add_image(index);
    }
    //当用户选择一张图片后，添加一个image
    function add_image(index) {
        var a = '<div id="div_' + (index + 1) + '" style="float: left">';
        var b = '<input id="file_' + (index + 1) + '" type="file" name="files" style="display: none;" οnchange="replace_image(' + (index + 1) + ')">';
        var c = '<img id="image_' + (index + 1) + '" οnclick="select_image(' + (index + 1) + ')" style="cursor:pointer;padding: 5px" src="upload_hover.jpg" width="90px" height="90px">';
        var d = '</div>';
        $("#div_" + index).after(a + b + c + d);
    }

添加一个image时，所有的index的值加一，这时候功能完成了，但是发现有bug。当你点击选择的图片时，会让你选择新的图片，但是这个时候，会在你选择的图片后面新增一个imag，如下图

在这里插入图片描述

点击第一张图片后，选择新的图片

在这里插入图片描述
这不是我们想要的，怎么解决这个问题呢？我们想一下，只有点击最后一个图片的时候，是没有影响的，可以看我们的代码，当图片加载出来后，就新增一个image图片，所以解决的方法就是，判断你点击的这个图片是不是最后一个，只有最后一个，才让他添加图片，不是最后一个不让他添加图片。所以在replace_image函数添加一个判断，如下：

if ((index + 1) == length) {
            // 用户选择的是最后一张图片
            add_image(index);
}

这样就解决了，这样的方法在很多地方都会用到。前端代码解决了，下面来看后端。

后端spring给我们集成了文件上传，所以只要使用就行了，先在webapps下新加一个images文件夹，来看后台接受代码：FileController.java

@RequestMapping("/upload_image")
    public String upload_image(@RequestParam("files") MultipartFile[] files) {
        /*获取到存放文件的目录*/
        String path = "E:\\Idea\\spring\\SSM_Collection\\src\\main\\webapp\\images";
        /*创建一个数组来存放文件名*/
        List<String> images_name = new ArrayList<>();
        /*循环处理文件*/
        for (int i = 0; i < files.length; i++) {
            /*只有文件不为空时在处理*/
            if (!files[i].isEmpty()) {
                /*获得文件的原始名字*/
                String originalFilename = files[i].getOriginalFilename();
                /*生成唯一文件名，确保文件不会重复*/
                String only_name = System.currentTimeMillis() + originalFilename;
                String file_name = path + "/" + only_name;

                try {
                    /*将文件存储到指定的文件夹下*/
                    files[i].transferTo(new File(file_name));
                    /*将文件名添加到文件名集合中*/
                    images_name.add(file_name);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            } else {
                /*什么也不做*/
            }
        }
        return "success";
    }

在接受参数时，使用multipartFile这个对象来接受，@RequestParam(“files”)来指定页面参数的名字，首先path为上传文件存放的目录，文件名集合的目的是，可以保存到数据库，想要取这张图片时用，可能用户上传的文件时多个，所以先遍历文件，单个的处理文件，具体代码，很简单，看一下基本上都会了。运行项目，上传图片，看images有没有图片。

在这里插入图片描述

下面来演示Ajax来上传文件

使用ajax来上传时，在form先将action去掉，添加一个id,因为ajax会有调用的方法参数，再将submit的type改为button。添加一个click事件。

function upload_file() {
        var form_data = new FormData($("#form_file")[0]);
        $.ajax({
            type:'POST',
            url:'upload.do',
            data:form_data,
            cache : false,
            processData : false,
            contentType : false,
        }).success(function (data) {
            var result = JSON.parse(data);
            alert(result.back());
        }).error(function () {
            alert("上传失败！")
        });
    }

FileController.java,代码是一样的，只是添加一个ResponseBody

    @RequestMapping("/upload")
    @ResponseBody
    public Object upload(@RequestParam("files") MultipartFile[] files) {
        /*获取到存放文件的目录*/
        String path = "E:\\Idea\\spring\\SSM_Collection\\src\\main\\webapp\\images";
        /*创建一个数组来存放文件名*/
        List<String> images_name = new ArrayList<>();
        /*循环处理文件*/
        for (int i = 0; i < files.length; i++) {
            /*只有文件不为空时在处理*/
            if (!files[i].isEmpty()) {
                /*获得文件的原始名字*/
                String originalFilename = files[i].getOriginalFilename();
                /*生成唯一文件名，确保文件不会重复*/
                String only_name = System.currentTimeMillis() + originalFilename;
                String file_name = path + "/" + only_name;

                try {
                    /*将文件存储到指定的文件夹下*/
                    files[i].transferTo(new File(file_name));
                    /*将文件名添加到文件名集合中*/
                    images_name.add(file_name);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            } else {
                /*什么也不做*/
            }
        }
        return "";
    }

重新启动项目，点击提交，页面不动，因为我们后台没有上传数据到后台，但是看images下有新上传的文件。

文件的下载

先看前端代码

<img src="images/1558021489763SSM_02.jpg" id="download" name="1558021489763SSM_02.jpg">
<button onclick="download_file()">下载</button>

function download_file() {
    var filename = $("#download").attr("name");
    window.location.href="download.do?filename="+filename;
}

后端代码，SpringMVC 已经提供好了

    @RequestMapping("/download")
    public ResponseEntity<byte[]> download(HttpServletRequest request, @RequestParam("filename") String filename, Model model) throws Exception {
        //下载文件路径
        String path = request.getServletContext().getRealPath("/images/");
        File file = new File(path + File.separator + filename);
        HttpHeaders headers = new HttpHeaders();
        //下载显示的文件名，解决中文名称乱码问题
        String downloadFielName = new String(filename.getBytes("UTF-8"), "iso-8859-1");
        //通知浏览器以attachment（下载方式）打开图片
        headers.setContentDispositionFormData("attachment", downloadFielName);
        //application/octet-stream ： 二进制流数据（最常见的文件下载）。
        headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),
                headers, HttpStatus.CREATED);
    }

这样就好了。

人美就不要想得美

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Java SpringMVC 点击图片上传文件和文件的上传、下载

如何自定义点击按钮上传图片和文件的上传、下载首先要搭建好ssm的基本环境导入文件上传依赖的包<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> &l...
复制链接

扫一扫