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表单实现