java中excel文件的导入，限制上传的文件类型，文件的大小，显示上传文件的进度条

1. 前台代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>导入excel测试</title>
    <style>
        #fatherDiv{
            width:100px;
            height:20px;
            border:1px solid green;
        }
        #sonDiv{
            width:0px;
            height:20px;
            background:green;
        }
    </style>

    <script th:src="@{|/js/jquery-2.1.4.min.js/|}"></script>
    <script>
        $(function () {

            $("#importExcel").bind("click", function () {

                /* 判断是否有导入文件 */
                if (!$("#excel").val()) {
                    window.alert("请导入excel文件");
                    return;
                }

                /* 判断输入的文件的类型 */
                var splitArray = $("#excel").val().toLowerCase().split(".");
                var type = splitArray[splitArray.length - 1];
                if (type != "xls" && type != "xlsx") {
                    window.alert("导入的文件类型有误");
                    return;
                }

                // 获取excel对象
                var excel = $("#excel")[0].files[0];

                /* 判断输入的excel文件的大小 */
                var excelSize = excel.size;
                if (excelSize > 1024 * 1024 * 10) {
                    window.alert("当前上传的excel文件的大小为" +
                        Math.round(excelSize / 1024 / 1024 * 100) / 100 +
                        "M,超过10M");
                    return;
                }

                var formData = new FormData();
                formData.append("file", excel);

                // ajax异步文件上传
                $.ajax({
                    type: "post",
                    url: "/importExcel",
                    data: formData,
                    contentType: false, // 不再采用普通的form表单元素提交方式。(multipart/form-data)
                    processData: false, // 提交文件，不是提交普通的字符串。
                    xhr: function () {  // 显示上传进度条
                        myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) {
                            myXhr.upload.addEventListener('progress', function (e) {
                                var loaded = e.loaded;//已经上传大小情况
                                var tot = e.total;//附件总大小
                                var per = Math.floor(100 * loaded / tot); //已经上传的百分比
                                $("#sonDiv").html(per + "%");
                                $("#sonDiv").css("width", per + "%");
                                $("#schedule").html(per + "%");
                                console.log('附件总大小 = ' + loaded);
                                console.log('已经上传大小 = ' + tot);
                            }, false);
                        }
                        return myXhr;
                    },
                    success: function (json) {
                        if (json.result) {
                            alert("导入成功")
                        } else {
                            alert(json.errorMessage);
                        }
                    }
                });
            })
        })
    </script>
</head>
<body>
    请选择你要导入的excel文件(.xls;.xlsx)<br/>
    <input type="file" id="excel"/> &nbsp;&nbsp;

　　//进度条框
    <div id="fatherDiv">
        <div id="sonDiv"></div>
    </div><br/>

　　//上传了多少百分比
    <span id="schedule">0%</span>
    <button id="importExcel">导入</button>

</body>
</html>

2. 后台spring代码

package com.bjpowernode.excel.importExcel.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import java.util.HashMap;
import java.util.Map;

/**
 * ClassName:ImportExcel
 * Package:com.bjpowernode.excel.importExcel.controller
 * Description:
 *
 * @Date:2019/2/25 21:46
 * @Author: 郑军
 */
@Controller
public class ImportExcel {

    @RequestMapping("/")
    public String toIndex() {
        return "index";
    }

    @RequestMapping("/importExcel")
    @ResponseBody
    public Map<String, Object> importExcel(@RequestParam("file") MultipartFile file) {

        Map<String, Object> map = new HashMap<>();

        String originalFilename = file.getOriginalFilename();
        String fileType = originalFilename.substring(originalFilename.lastIndexOf("."));
        if (!".xls".equals(fileType) && !".xlsx".equals(fileType)) {
            map.put("result", false);
            map.put("errorMessage", "导入的文件类型有误");
            return map;
        }

        // 导入的excel数据相关的业务逻辑校验，暂时省略。

        map.put("result", true);
        map.put("errorMessage", "");

        return map;
    }

}

java中excel文件的导入，限制上传的文件类型，文件的大小，显示上传文件的进度条

猜你喜欢