上传文件demo 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <style>
        label {
            display: inline-block;
            color: red;
            height: 28px;
            line-height: 28px;
            width: 100px;
            text-align: center;
            background-color: rgb(40, 221, 253);
            border: solid 1px #ccc;
            border-radius: 2px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div><a href="javascript:;" id="download-template">下载模板</a></div>
    <div>
        <div>
            <label for="file">
                <span class="btn-file">
                    上传文件
                    <input class="file-input" name="file" type="file" onchange="upLoadFile()"
                        accept="application/msexcel" id="file" style="display: none">
                </span>
            </label>
            <p id="file-name"></p>
            <p><span>上传文件类型：csv</span></p>
            <button id="import">导入</button>
            <button id="cancel">取消</button>
        </div>
    </div>
</body>

<script>
    var file  = "";

    $(document).ready(function(){
        // 导入
        $("#import").click(function() {
            var fileName = $("#file-name").text();
            if(!!fileName) {
                importFile();
            } else {
                alert("请选择上传文件!"); 
            }
        });

        // 取消
        $("#cancel").click(function() {
            $("#file-name").text("");
        });

        // 下载模板
        $("#download-template").click(function() {
            window.open('./test.csv');
        });
    });

    function importFile() {
        var fileData = new FormData();
        fileData.append('fileupload', file);
        // console.log(fileData)  // 把fileData传给接口
    }

    function upLoadFile(e) {
        var event = e || window.event;
        file = event.target.files[0];
        if (file) {
            var fileName = file.name;
            if (fileName != "") {
                var fileSuffix = fileName.substr(fileName.indexOf("."));
                if (fileSuffix != ".csv" && fileName) {
                    alert("限CSV文件格式");
                    return;
                }

                $("#file-name").text(fileName)
            }
        }
    }

</script>

</html>

 

posted @ 2019-08-09 11:10  yhQuan  阅读(477)  评论(0)    收藏  举报