使用 Flask-Uploads + jQuery + Boot
2016-12-01 本文已影响2486人
与蟒唯舞
Flask-Uploads allows your application to flexibly and efficiently handle file uploading and serving the uploaded files. You can create different sets of uploads - one for document attachments, one for photos, etc. - and the application can be configured to save them all in different places and to generate different URLs for them.
环境及版本号：
- python 2.7.10
- Flask==0.11.1
- Flask-Uploads==0.2.1
上传效果图：
后台逻辑代码：
# main.py
# coding:utf-8
from flask import Flask, render_template, request
from flask_uploads import UploadSet, configure_uploads, ALL
app = Flask(__name__)
files = UploadSet('files', ALL)
app.config['UPLOADS_DEFAULT_DEST'] = 'uploads'
configure_uploads(app, files)
@app.route('/upload', methods=['GET', 'POST'])
def upload():
if request.method == 'POST' and 'media' in request.files:
filename = files.save(request.files['media'])
url = files.url(filename)
return render_template('upload.html')
if __name__ == '__main__':
app.run(debug=True)
前端模板代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form action="{{url_for('upload')}}" method="POST" enctype="multipart/form-data">
<input type="file" id="media" name="media">
<input type="submit">
</form>
<div class="progress" style="display: none;">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
<script type="text/javascript">
$('form').on('submit', function (event) {
// 显示进度条
$('.progress').css('display', 'block');
// 阻止元素发生默认的行为，此处用来阻止对表单的提交
event.preventDefault();
var formData = new FormData(this);
// jQuery Ajax 上传文件，关键在于设置：processData 和 contentType
$.ajax({
xhr: function () {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
var percent = Math.round(e.loaded * 100 / e.total);
$('.progress-bar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');
}
});
return xhr;
},
type: 'POST',
url: '/upload',
cache: false,
data: formData,
// 告诉 jQuery 不要去处理发送的数据
processData: false,
// 告诉 jQuery 不要去设置 Content-Type 请求头
// 因为这里是由 <form> 表单构造的 FormData 对象，且已经声明了属性 enctype="multipart/form-data"，所以设置为 false
contentType: false
}).done(function (res) {
alert('上传成功!');
}).fail(function (res) {
alert('上传失败!');
});
});
</script>
</body>
</html>
