k8king
10/17/2019 - 2:44 AM

HTML框架

base.html
content_copyfile_download
<!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.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
</head>
<body>
    
</body>
</html>
upload.html
content_copyfile_download
<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>File upload</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="uploadForm">
    <input id="file" type="file" multiple/>
    <button id="upload" type="button" onclick="getUpload()">upload</button>
</div>
<div id="result">

</div>
<script type="text/javascript">
    var length;
    $("#file").change(function () {
        length = this.files.length;
        console.log(length);
    })

    function getUpload(){
        var formData = new FormData();
        var arr=new Array();
        var container;
        var i=0;
        for(let i=0;i<length;i++){
            formData.append('file', $('#file')[0].files[i]);
            console.log(formData.get("file"));
        }
        container=formData.getAll("file");
        for (var item in container) {
            arr[i] = container[item];
            i++;
        }
        console.log(arr);
        $.ajax({
            url: '/pic',
            type: 'POST',
            dataType:"json",
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: on_before,
            // success:(function(data) {
            //     window.confirm(data.data)
            // }),
            success: on_success,
            // error:(function(res) {
            //     alert("失败");
            // })
            error: on_error,
        });
    }

    function on_before() {
        $("#result").html('加载中...');

    }

    function on_success(data) {
        clean_up();
        var jsonArray = eval(data.data)
        $.each(jsonArray, function (index, item) {
            $("#result").html($("#result").html() + "<br>" + jsonArray[index] + "<br/>");
        });

    }

    function on_error(data) {
        clean_up();
        alert("失败");
    }

    function clean_up() {
        $("#result").html('');
    }
</script>
</body>
</html>