SpringMVC实现的文件上传进度条Bootstrap展示

最新推荐文章于 2021-04-13 19:40:28 发布

大啊哒哒哒

最新推荐文章于 2021-04-13 19:40:28 发布

阅读量197

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_44939796/article/details/89429712

本文介绍如何使用SpringMVC和Bootstrap实现带进度条的文件上传功能，包括进度条POJO类、ProgressListener实现、MultipartResolver自定义、Controller处理及前端页面设计。

背景

想做一个带进度条的文件上传，可是搜索的结果都不是很满意，最后参考一个实践了一下，基于SpringMVC实现，前端采用Bootstrap。

整理一下进度条的实现。

效果

先看最后的效果

这里写图片描述

实现步骤

前提

SpringMVC已经配置好了

第一步

写一个进度条pojo

Progress.java

/** * 进度条 * @author 程高伟 * * @date 2016年7月5日 上午9:51:47  */public class Progress {    private long bytesRead;    private long contentLength;    private long items;    public long getBytesRead() {        return bytesRead;    }    public void setBytesRead(long bytesRead) {        this.bytesRead = bytesRead;    }    public long getContentLength() {        return contentLength;    }    public void setContentLength(long contentLength) {        this.contentLength = contentLength;    }    public long getItems() {        return items;    }    public void setItems(long items) {        this.items = items;    }    @Override    public String toString() {        return "Progress [bytesRead=" + bytesRead + ", contentLength=" + contentLength + ", items=" + items + "]";    }}
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

第二步实现ProgressListener

依赖的jar包

<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.5</version></dependency>
  1
2
3
4
5
6
7
8
9
10

FileUploadProgressListener.java

import javax.servlet.http.HttpSession;import org.apache.commons.fileupload.ProgressListener;import org.springframework.stereotype.Component;import com.cdpts.wechat.model.Progress;@Componentpublic class FileUploadProgressListener implements ProgressListener {    private HttpSession session;    public void setSession(HttpSession session){        this.session=session;        Progress status = new Progress();//保存上传状态        session.setAttribute("status", status);    }    @Override    public void update(long bytesRead, long contentLength, int items) {        Progress status = (Progress) session.getAttribute("status");        status.setBytesRead(bytesRead);        status.setContentLength(contentLength);        status.setItems(items);    }}
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

第三步继承CommonsMultipartResolver

import java.util.List;import javax.servlet.http.HttpServletRequest;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.FileUpload;import org.apache.commons.fileupload.FileUploadBase;import org.apache.commons.fileupload.FileUploadException;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.multipart.MaxUploadSizeExceededException;import org.springframework.web.multipart.MultipartException;import org.springframework.web.multipart.commons.CommonsMultipartResolver;import com.cdpts.wechat.service.FileUploadProgressListener;public class CustomMultipartResolver extends CommonsMultipartResolver {    // 注入第二步写的FileUploadProgressListener     @Autowired    private FileUploadProgressListener progressListener;    public void setFileUploadProgressListener(FileUploadProgressListener progressListener) {        this.progressListener = progressListener;    }    @Override    public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException {        String encoding = determineEncoding(request);        FileUpload fileUpload = prepareFileUpload(encoding);        progressListener.setSession(request.getSession());        fileUpload.setProgressListener(progressListener);        try {            List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);            return parseFileItems(fileItems, encoding);        } catch (FileUploadBase.SizeLimitExceededException ex) {            throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);        } catch (FileUploadException ex) {            throw new MultipartException("Could not parse multipart servlet request", ex);        }    }}
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

第四步

在springmvc的配置文件中配置第三步的CustomMultipartResolver

<bean id="multipartResolver" class="com.cdpts.wechat.utils.spring.CustomMultipartResolver"/>
  1
2

第五步

编写Controller

    // 处理上传的    @RequestMapping("/upload")    public void upload(HttpServletRequest request, HttpServletResponse response,            @RequestParam("file") CommonsMultipartFile file) throws IOException {        PrintWriter out;        boolean flag = false;        if (file.getSize() > 0) {            String path = "/assets/upload/files/";            String uploadPath = request.getSession().getServletContext().getRealPath(path);            try {                FileUtils.copyInputStreamToFile(file.getInputStream(),                        new File(uploadPath, file.getOriginalFilename()));                flag = true;            } catch (Exception e) {            }        }        out = response.getWriter();        if (flag == true) {            out.print("1");        } else {            out.print("2");        }    }
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

第六步开发页面

需要bootstrap

html部分

<!-- Modal --><div id="batchImportModal" class="modal fade" role="dialog"    aria-labelledby="gridSystemModalLabel">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                <h4 class="modal-title" id="myModalLabel">批量导入用户</h4>            </div>            <div class="modal-body">                <div class="form-group" id="passwordDiv">                    <label>选择用户数据文件</label>                     <input class="form-control" type="file" id="batchFile">                </div>                <div class="progress progress-striped active" style="display: none">                    <div id="progressBar" class="progress-bar progress-bar-info"                        role="progressbar" aria-valuemin="0" aria-valuenow="0"                        aria-valuemax="100" style="width: 0%">                    </div>                </div>                <div class="form-group">                    <input id="batchUploadBtn" type="submit" name="submit" class="btn btn-success" value="上传" />                </div>            </div>        </div>        <!-- /.modal-content -->    </div>    <!-- /.modal-dialog --></div><!-- /.modal -->
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

JavaScript部分

$(function() {    // 批量导入按钮    $("#batchImportBtn").click(function(){        $('#batchImportModal').modal('show');    })    var base = $("#base").val().trim();    // 上传按钮    $("#batchUploadBtn").attr('disabled', true);    // 上传文件按钮点击的时候    $("#batchUploadBtn").click(function() {        // 进度条归零        $("#progressBar").width("0%");        // 上传按钮禁用        $(this).attr('disabled', true);        // 进度条显示        $("#progressBar").parent().show();        $("#progressBar").parent().addClass("active");        // 上传文件        UpladFile();    })    // 文件修改时    $("#batchFile").change(function() {        $("#batchUploadBtn").val("上传");        $("#progressBar").width("0%");        var file = $(this).prop('files');        if (file.length != 0) {            $("#batchUploadBtn").attr('disabled', false);        }    });    function UpladFile() {        var fileObj = $("#batchFile").get(0).files[0]; // js 获取文件对象        console.info("上传的文件："+fileObj);        var FileController = base + "/admin/user/upload"; // 接收上传文件的后台地址         // FormData 对象        var form = new FormData();        // form.append("author", "hooyes"); // 可以增加表单数据        form.append("file", fileObj); // 文件对象        // XMLHttpRequest 对象        var xhr = new XMLHttpRequest();        xhr.open("post", FileController, true);        xhr.onload = function() {            // ShowSuccess("上传完成");            alert("上传完成");            $("#batchUploadBtn").attr('disabled', false);            $("#batchUploadBtn").val("上传");            $("#progressBar").parent().removeClass("active");            $("#progressBar").parent().hide();            //$('#myModal').modal('hide');        };        xhr.upload.addEventListener("progress", progressFunction, false);        xhr.send(form);    }    ;    function progressFunction(evt) {        var progressBar = $("#progressBar");        if (evt.lengthComputable) {            var completePercent = Math.round(evt.loaded / evt.total * 100)+ "%";            progressBar.width(completePercent);            $("#batchUploadBtn").val("正在上传 " + completePercent);        }    };}
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65