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

时间:2015-05-11 17:11:49

标签: javascript jquery django file-upload mime-types

我目前正在寻找基于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>

1 个答案:

答案 0 :(得分:0)

<强>解决方案:

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

&#13;
&#13;
-    file = models.ImageField(upload_to="pictures")
+    file = models.FileField(upload_to="pictures")
&#13;
&#13;
&#13;

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