我目前正在寻找基于HTML5和Javascript的文件上传器,并且遇到了jQuery文件上传。 jQuery File Upload似乎拥有我需要的一切。 https://blueimp.github.io/jQuery-File-Upload/basic.html
为了快速测试与Django相关的jQuery文件上载功能,我很幸运能在GitHub上找到“django-jquery-file-upload”项目。这个例子非常适用于图像gif,jpeg和png文件。
问题:
我需要jQuery文件上传,允许用户上传mime类型为“application / octet-stream”且扩展名为“xyz”的二进制文件。另外我想将最大上传文件大小增加到30MB。由于jQuery文件上传带有“ acceptFileTypes ”和“ maxFileSize ,所以这一切看起来都非常简单。 “财产。然而,这些属性不会被考虑在内。几个小时以来我一直没能成功。我还尝试了stackoverflow.com/questions/17451629/maxfilesize-and-acceptfiletypes-in-blueimp-file-upload-plugin-do-not-work-why提供的大部分建议
如何在github.com/sigurdga/django-jquery-file-upload上获取基本示例f(“picture_basic_form.html”)以启用“application / octet-stream”上传?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="{{ STATIC_URL }}js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="{{ STATIC_URL }}js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="{{ STATIC_URL }}js/jquery.fileupload.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}js/jquery.cookie.js"></script>
<script>
/*jslint unparam: true */
/*global window, $ */
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = '/upload/basic/';
var csrftoken = $.cookie('csrftoken');
$('#fileupload').fileupload({
url: url,
crossDomain: false,
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
答案 0 :(得分:0)
<强>解决方案:强>
@pazorphyn,你是对的,问题是服务器端。在您发表评论后,我再次通过它并找到了它。models.ImageField
必须更改为models.FileField
。
- file = models.ImageField(upload_to="pictures")
+ file = models.FileField(upload_to="pictures")
&#13;
可以在https://github.com/quater/django-jquery-file-upload找到工作示例。