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

落日映苍穹つ 2022-09-23 04:58 375阅读 0赞

# 背景 #

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

整理一下进度条的实现。

# 效果 #

先看最后的效果

![这里写图片描述][20160706103814424]

# 实现步骤 #

## 前提 ##

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 + "]";
        }
    
    }

## 第二步 实现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>

FileUploadProgressListener.java

import javax.servlet.http.HttpSession;
    
    import org.apache.commons.fileupload.ProgressListener;
    import org.springframework.stereotype.Component;
    import com.cdpts.wechat.model.Progress;
    @Component
    public 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);
    
        }
    
    }

## 第三步 继承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);
            }
        }
    
    }

## 第四步 ##

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

## 第五步 ##

编写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");
            }
        }

## 第六步 开发页面 ##

**需要bootstrap**

### html部分 ###

<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">×</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>
            
        </div>
        
    </div>

### 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);
            }
        };
    }

# 我写了一个简单的开源项目，项目中有一个带进度条的文件上传 #

效果图如下

![效果图][20161125094812807]

[完整的jsp页面地址][jsp]

[开源项目github地址][github]，如果觉得可以别忘了给个star哦。

数据库脚本地址  
[https://github.com/peer44/java-rbac/blob/master/jrbac/src/main/resources/sql/jrbac.sql][https_github.com_peer44_java-rbac_blob_master_jrbac_src_main_resources_sql_jrbac.sql]

# 参考文献 #

> [参考的博客][Link 1]  
> [Bootstrap官网][Bootstrap]

[20160706103814424]: /images/20220721/7ac03578eb2b401194d4d11f51f2eccc.png
[20161125094812807]: /images/20220721/084b947473704440b00b621cce35b969.png
[jsp]: https://github.com/peer44/java-rbac/blob/master/jrbac/src/main/webapp/WEB-INF/views/admin/test/fileupload.jsp
[github]: https://github.com/peer44/java-rbac
[https_github.com_peer44_java-rbac_blob_master_jrbac_src_main_resources_sql_jrbac.sql]: https://github.com/peer44/java-rbac/blob/master/jrbac/src/main/resources/sql/jrbac.sql
[Link 1]: http://www.th7.cn/Program/java/201503/406582.shtml
[Bootstrap]: http://v3.bootcss.com/