SpringMVC的文件上传以及进度条_spring mvc文件上传进度条-CSDN博客

本文链接：https://blog.csdn.net/qq_42488087/article/details/103088731

SpringMVC的文件上传

文件上传以及进度条的展示

前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <script type="text/javascript" src="js/j.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btn").click(function () {
                    //获取要上传的文件,jq是一个数组，获取第一个数据, files[0]获取到二进制数据
                    var file = $("#fileUpload")[0].files[0];
                    var formData = new FormData();
                    formData.append("fileUpload",file);

                    //发起ajax请求完成上传
                    $.ajax({
                        url: "fileUpload",
                        type: "post",
                        processData: false,
                        contentType: false,
                        data: formData,
                        xhr: function() {
                            var xhr = new XMLHttpRequest();
                            //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                            xhr.upload.addEventListener('progress', function (e) {
                                console.log(e);
                                //loaded代表上传了多少
                                //total代表总数为多少
                                var progressRate = (e.loaded / e.total) * 100 + '%';
                                //显示上传百分比
                                $("#uploadSpan").html(progressRate);
                                //通过设置进度条的宽度达到效果
                                $('.progress > div').css('width', progressRate);
                            })
                            return xhr;
                        },
                        success: function (data) {
                            alert("上传文件成功！");
                            $("#upid").val(data);
                        }
                    })

                })
            })


        </script>
        <style type="text/css">

            .progress {
                width: 600px;
                height: 10px;
                border: 1px solid #ccc;
                border-radius: 10px;
                margin: 10px 0px;
                overflow: hidden;
            }
            /* 初始状态设置进度条宽度为0px */
            .progress > div {
                width: 0px;
                height: 100%;
                background-color: yellowgreen;
                transition: all .3s ease;
            }
        </style>

        <table cellpadding="10px">
            <form action="insertMail" method="post">
                <tr>
                    <td>收件人</td>
                    <td>
                        <input type="text" name="recid">
                    </td>
                </tr>
                <tr>
                    <td>主题</td>
                    <td><input type="text" name="mtitle" value=""></td>
                </tr>
                <tr>
                    <td>正文</td>
                    <td>
                        <textarea name="mcontext" id="mcontent" cols="30" rows="10"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>附件</td>
                    <td>
                        <input type="file" id="fileUpload"  name="file">
                        <input type="button" value="上传" id="btn">
                        <%--进度条--%>
                        <div class="progress">
                            <div></div>
                        </div>
                        <%--上传的百分比--%>
                        <span id="uploadSpan"></span>
                        <%--获取上传文件数据库中的id--%>
                        <input type="hidden" name="upid" value="" id="upid">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="发送">
                    </td>
                </tr>
            </form>
        </table>
    </body>
</html>

后台代码

/*文件上传*/
@RequestMapping("fileUpload")
@ResponseBody
//第一个参数名必须跟前台的formData.append("fileUpload",file);的键名一致
public String fileUpload(MultipartFile fileUpload, HttpServletRequest request) throws IOException {
    //动态获取项目下的文件存储路径
    ServletContext context = request.getServletContext();
    String realPath = context.getRealPath("/upload");

    //创建文件新的存储名
    //获取文件的原始名
    String name = fileUpload.getOriginalFilename();
    //获取文件的后缀名
    String suffix=name.substring(name.lastIndexOf("."));//.jpg
    //创建文件新的名字
    String newName= ""+ UUID.randomUUID()+System.currentTimeMillis()+suffix;
    //将文件存储到服务器硬盘中
    fileUpload.transferTo(new File(realPath,newName));
    //存储上传记录信息
    Upload upload = new Upload();
    upload.setNewname(newName);
    upload.setOldname(name);
    upload.setUptype(fileUpload.getContentType());   //文件的类型
    //调用业务层存储到数据库
    int upid= mailService.insUploadInfoService(upload);
    return upid+"";
}

注意：文件上传要在springmvc.xml文件中配置上传解析的bean

<!--配置上传解析bean-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>