ModelForm (Django) 中 FileField 上传的进度条

Question

我正在寻找一些实现文件上传进度条的指针，该进度条提供有关 ModelForm 内 FileField 上传当前状态的反馈。

我的 ModelForm 有很多字段（不仅仅是 FileField），我想用进度条显示进度的实时反馈。

谢谢。

Answer 1

这是我的问题解决方案：django-smartfields，这个应用程序可以负责报告进度、转换图像或视频、清理旧文件等等。它对进度报告有一些要求：

• django-crispy-forms
• jQuery
• plupload
• bootstrap3
• bootbox

我现在正在为 django-smartfields 编写文档，但该应用程序的这一部分仍未记录，但这里是您将如何使用它。

from django.db import models
from django.conf import settings
from smartfields import fields

class FileModel(models.Model):
    user = models.ForeignKey(settings.AUTH_USER_MODEL, editable=False)
    file = fields.FileField(uploadTo='files')
    # other fields ....
    parent_field_name = 'user'

    def has_upload_permission(self, user, field_name=None):
        return user == self.user

现在在forms.py:

from django import forms
from myapp.models import FileModel
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout
from smartfields.crispy.layout import FileField

class FileForm(forms.ModelForm):

    class Meta:
        model = FileModel
        fields = ('file', other fields...)

    @property
    def file_upload_url(self):
        return reverse("smartfields:upload", kwargs={
            'app_label': 'test_app',
            'model': FileModel.__name__,
            'field_name': 'file',
            'pk': self.instance.pk,
            'parent_field_name': 'user'
            'parent_pk': self.instance.user.pk
        })


    def __init__(self, *args, **kwargs):
        super(FileForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.form_tag = False
        self.helper.layout = Layout(
            FileField('file', plupload_options={
                'url': self.file_upload_url,
                'filters': {
                    'max_file_size': "20mb",
                    'mime_types': [{'title': "Documents",
                                    'extensions': "pdf,doc"}]
            }}))

除了'file_form' 应该在上下文中之外，不需要在views.py 中做任何特别的事情。确保smartfields 在INSTALLED_APPS 和urls 中包含url(r'^smartfields/', include('smartfields.urls', namespace='smartfields')),，或者您可以通过扩展smartfields.views.FielUpload 创建自定义上传视图。

在模板中：

{% load static crispy_forms_tags %}
<link rel="stylesheet" href="{% static 'bootstrap3/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap3/css/bootstrap-theme.min.css' %}">
<link rel="stylesheet" href="{% static 'css/smartfields.css' %}">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'bootstrap3/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'plupload/js/plupload.full.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootbox.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/smartfields.js' %}"></script>

<form method="POST">
  {% crispy file_form %}
  <input class="btn btn-default" type="submit" name="btn_save" value="Save">
</form>

如果您有任何问题或由于某种原因它不起作用，请告诉我。确保您使用的是 github 上的版本，pypi 上的 javascript 文件已过时。