Flask Web开发入门

Flask Web开发入门（八）之文件上传

https://blog.csdn.net/kangkanglou/article/details/79027425

 

前端：详情见上面的链接/也可以直接用form表单发post

<!DOCTYPE html>

<html>

<head>

    <title>Html5 Ajax 上传文件</title>

    <script type="text/javascript">

        function UpladFile() {

            var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
            console.log(fileObj)
            console.log(fileObj.name)
            var FileController = "http://127.0.0.1/upload/" + fileObj.name;          // 接收上传文件的后台地址


            // 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 () {

                alert("上传完成!");

            };

            xhr.upload.addEventListener("progress", progressFunction, false);


            xhr.send(form);


        }

        function progressFunction(evt) {

            var progressBar = document.getElementById("progressBar");

            var percentageDiv = document.getElementById("percentage");

            if (evt.lengthComputable) {

                progressBar.max = evt.total;

                progressBar.value = evt.loaded;

                percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";

            }
        }

    </script>

</head>

<body>

<progress id="progressBar" value="0" max="100">

</progress>

<span id="percentage"></span>

<br/>

<input type="file" id="file" name="myfile"/>

<input type="button" onclick="UpladFile()" value="上传"/>

</body>

</html>

后端视图：

from flask import Flask, request, render_template

app = Flask(__name__)
app.debug = True


@app.route('/upload/<filenames>', methods=['get', 'post'])
def save_file(filenames):
    if request.method == 'POST':
        file_obj = request.files['file']
        if file_obj:
            print(file_obj.filename)
            file_obj.save(file_obj.filename)  # filename是对象中有的key
            return "上传成功"

    return render_template('upload.html')


if __name__ == '__main__':
    app.run("0.0.0.0", 80)

 

注另解：直接通过form表单实现

https://blog.csdn.net/wanghandou/article/details/77877366

 

posted @ 2018-11-28 18:01  Alive_2020  阅读(279)  评论(0)    收藏  举报