blueimp当前有没有使用Flask和jquery文件上传的示例?
我想知道目前是否有blueimp在flask框架中使用jquery文件上传插件的例子。如果有人有一些代码片段可以分享,我将不胜感激 他们的布局似乎很好,我可以添加一个文件,它预览良好。问题是,当我尝试去上传它时,我会遇到这样的错误: [12:47:58.690]POST[HTTP/1.0 400错误请求7ms] 在服务器端,我甚至没有一个可以打印出来的有效文件对象,所以我认为这里的问题在于代码的javascript部分(或者可能我在这方面也错了)。以下是我目前在模板端使用的相关代码:blueimp当前有没有使用Flask和jquery文件上传的示例?,flask,jquery-file-upload,Flask,Jquery File Upload,我想知道目前是否有blueimp在flask框架中使用jquery文件上传插件的例子。如果有人有一些代码片段可以分享,我将不胜感激 他们的布局似乎很好,我可以添加一个文件,它预览良好。问题是,当我尝试去上传它时,我会遇到这样的错误: [12:47:58.690]POST[HTTP/1.0 400错误请求7ms] 在服务器端,我甚至没有一个可以打印出来的有效文件对象,所以我认为这里的问题在于代码的javascript部分(或者可能我在这方面也错了)。以下是我目前在模板端使用的相关代码: <f
<form action="{{ url_for('upload') }}" method="post" enctype="multipart/form-data">
!-- The global progress bar -->
<div id="progress" class="progress progress-success progress-striped">
<div class="bar"></div>
</div>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br><br>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
</form>
<script type="text/javascript" src="{{ url_for('static', filename='assets/js/jquery.ui.widget.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/js/jquery.iframe-transport.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/js/jquery.fileupload.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/js/jquery.fileupload-process.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/js/jquery.fileupload-image.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/js/jquery.fileupload-audio.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/js/jquery.fileupload-video.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/js/jquery.fileupload-validate.js') }}"></script>
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var uploadButton = $('<button/>')
.addClass('btn')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: '/upload',
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
if (!index) {
node
.append('<br>')
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append(file.error);
}
if (index + 1 === data.files.length) {
data.context.find('button')
.text('Upload')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
});
}).on('fileuploadfail', function (e, data) {
$.each(data.result.files, function (index, file) {
var error = $('<span/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
将上载方法更改为:
@app.route('/upload', methods=['POST'])
def upload():
try:
files = request.files
print files
uploaded_files = _handleUpload(files)
return jsonify({'files': uploaded_files})
except:
raise
return jsonify({'status': 'error'})
这是一个大约8个月大的版本:谢谢,但是我在让jquery文件上传器的基本ui版本与flask很好地工作时遇到了一些问题。这个例子很好,但不幸的是,我没有用S3来设置它。我对此也有点陌生,所以这对我来说更像是一个学习曲线。请发布你的Flask
/upload
处理程序。添加了相关的上传处理程序。谢谢你,马克。
@app.route('/upload', methods=['POST'])
def upload():
try:
files = request.files
print files
uploaded_files = _handleUpload(files)
return jsonify({'files': uploaded_files})
except:
raise
return jsonify({'status': 'error'})