jQuery 文件上传，启用二进制文件上传

Question

我目前正在寻找基于 HTML5 和 Javascript 的文件上传器，并遇到了 jQuery 文件上传。 jQuery 文件上传似乎有我需要的一切。 https://blueimp.github.io/jQuery-File-Upload/basic.html

为了快速测试 jQuery 与 Django 相关的文件上传功能，我很幸运地在 GitHub 上找到了 "django-jquery-file-upload" 项目。此示例完美适用于图像 gif、jpeg 和 png 文件。

问题：

我需要 jQuery 文件上传，允许用户上传 MIME 类型为 "application/octet-stream" 且扩展名为 "xyz" 的二进制文件。另外我想将最大上传文件大小增加到 30MB。乍一看，这一切似乎都很简单，因为 jQuery 文件上传带有“acceptFileTypes”和“” maxFileSize”属性。然而，这些属性不知何故没有被考虑在内。几个小时以来，我一直未能成功使它起作用。我也尝试了 Whosebug 提供的大部分建议。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>

Answer 1

解法：

@Razorphyn，你是对的，问题出在服务器端。在您发表评论后，我再次浏览并找到了它。 models.ImageField 必须更改为 models.FileField。

-    file = models.ImageField(upload_to="pictures")
+    file = models.FileField(upload_to="pictures")

可以在 https://github.com/quater/django-jquery-file-upload 找到工作示例。

jQuery 文件上传，启用二进制文件上传

jQuery File Upload, enable binary file upload

javascript

django

jquery

file-upload

mime-types