WEB的文件上传实现

1. 工程代码结构

templates
    +UploadFlush.html
    +UploadAjax.html
UploadServer.py


2. 上后端代码(基于Python Flask):

#UploadServer.py
#coding=utf-8
__author__ = 'root'
from flask import request
from flask import Flask
from flask import render_template
from werkzeug import secure_filename
app = Flask(__name__)
@app.route('/upload', methods=['Get', 'POST'])
def upload_fie():
    if request.method == 'POST':
        f = request.files['file']
        #windows下放入D:/tempfile/
        #f.save('D:/tempfile/'+secure_filename(f.filename))
        #Linux下放入/tmp
        f.save('/tmp/'+secure_filename(f.filename)) 
@app.route('/upload_flush')
def upload_flush():
    return render_template('UploadFlush.html')
@app.route('/upload_ajax')
def upload_ajax():
    return render_template('UploadAjax.html')
if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5001)

3. 上前端代码

1) UploadFlush.html 代码,完成后刷新。

<!--UploadFlush.html-->
<!doctype html>
<title>UploadFlush</title>
<h1>UploadFlush</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type=file name=file>
<input type=submit value=Upload>
</form>

2) UploadAjax.html 代码,上传时进度条实时显示进度。

<!--UploadAjax.html-->
<!DOCTYPE html>
<html>
<head>
    <title>UploadAjax</title>
    <script type="text/javascript">
        function UpladFile() {
            // 获取文件对象
            var fileObj = document.getElementById("file").files[0]; 
            // 接收上传文件的后台地址
            var FileController = "/upload";
            // FormData 对象
            var form = new FormData();
            // 文件对象
            form.append("file", fileObj);
            // XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.open("post", FileController, true);
            xhr.onload = function () {
                //console.log("上传完成!");
            };
            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>
<input type="file" id="file" name="file" />
<br/><br/>
<input type="button" onclick="UpladFile()" value="确定上传" />
<progress id="progressBar" value="0" max="100">
</progress>
<span id="percentage"></span>
</body>
</html>


你可能感兴趣的:(Ajax,python,flask)