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>
原文：http://my.oschina.net/crooner/blog/519694