用于jasny文件上传的django crispy表单

我正在使用django crispy表单，我正在尝试使用Jasny引导文件上传来让我的网页看起来更好

据我所知，Crispy forms开箱即用不支持Jasny文件上传。因为我不是很有经验，所以我尝试使用任何可以用的简洁形式，而不是创建我自己的布局对象。然而，我已经试了好几天了，但都不起作用

我知道这不是正确的方法，但到目前为止，我一直在尝试在forms.py中使用Crispy form的Div，使django生成类似于Jasny文件上载示例代码的内容

Jasny文件上载中的代码：

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
    <div>
        <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
    </div>
</div>

摘录自my forms.py：

       Div(
           HTML("""<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
        <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
        <div class"smalltest">
            <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span>
    """),
          Field('photo1'),
          HTML("""</span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a></div></div>"""),
          css_class = 'photofield'
         ),

这是非常丑陋的代码，它不工作，因为我仍然得到原来的选择文件按钮内的新按钮

我非常感谢任何能帮助我的人！我一直很沮丧，为了让这一切顺利，我拔了很多头发：

---

非常感谢。

我最终没有使用，我现在正在使用Django模板语言编写我自己的。这样做很好。

我想我会根据其他一些答案分享我的解决方案

首先，您不应该尝试使用Crispy表单中的布局，因为Jasny中的HTML与默认Crispy表单模板相差太大。首先，我们创建一个与Jasny一起工作的Crispy表单模板。这基本上只是用Jasny html更新的field.html模板

文件_field.html：

第三，默认情况下，使用Jasny和Django无法轻松清除图像。您可以找到Jasny行为的摘要。基本上，Jasny提交一个None或一个空白字符串，这取决于图像是否被更新或删除。Django将这两者解释为未更新的图像，而不是删除的图像

Django使用ClearableFileInput小部件，该小部件添加了一个复选框，如果希望删除该文件，则应选中该复选框。为了模拟此功能，我刚刚添加了一些jQuery，以便在选择“删除”按钮时添加此输入，并在选择“更改”或“插入”按钮时删除输入：

<script>
  // Allow image to be deleted
  $('#imgremove').on('click', function() {
  field_name = $('#imgfile')[0].getAttribute('name');
    $('#imgfileinput').append('<input id="imgclear" type="hidden" name="'+field_name+'-clear" value="on">');
  })
  $('#imgselect').on('click', function() {
    $('#imgclear').remove();
  })
</script>

你会注意到我上面的Jasny HTML已经被稍微修改，包括感兴趣的标签的id，以使选择更容易

---

看起来需要做很多工作，但一旦完成，它就和简单的crispy表单一样易于使用。

请注意，crispy表单的最新版本由于字符串格式的原因，使引用自定义模板变得更加困难。我必须将模板引用更改为template='%s/file\u field.html'，并将文件\u field.html文件放在模板路径上的bootstrap3文件夹中。我对ClearableFileInput采用了相同的方法。虽然这很痛苦，但目前这是唯一合理的选择，因为我的整个应用程序都是基于crispy forms的，现在更改它并手动实现表单将花费很多时间，所以可能在将来：-。

from crispy_forms.layout import Layout, Fieldset, Div, Submit, Reset, HTML, Field, Hidden
class UserForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(UserForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Field('avatar', template='file_field.html'),
            'username',
            'first_name',
            'last_name',
        )

<script>
  // Allow image to be deleted
  $('#imgremove').on('click', function() {
  field_name = $('#imgfile')[0].getAttribute('name');
    $('#imgfileinput').append('<input id="imgclear" type="hidden" name="'+field_name+'-clear" value="on">');
  })
  $('#imgselect').on('click', function() {
    $('#imgclear').remove();
  })
</script>