用于jasny文件上传的django-crispy-forms

Question

我正在使用django-crispy-forms(http://django-crispy-forms.readthedocs.org/),我正在尝试使用Jasny Bootstrap文件上传(http://jasny.github.io/bootstrap/javascript.html #fileupload)使我的网页看起来更好.

据我所知,开箱即用的Crispy表单不支持Jasny文件上传.由于我不是很有经验,我试图使用Crispy表单中的任何可用内容而不是创建自己的布局对象.但是,我已经试了好几天了,但它不起作用.

我知道这不是正确的方法,但到目前为止我的尝试是尝试在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>

摘自我的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'
         ),

这是非常难看的代码,它不起作用,因为我仍然在新按钮内获得原始的"选择文件"按钮.

我非常感谢任何可以提供帮助的人!我一直很沮丧,拔出了很多头发试图让这项工作:(

非常感谢.

Answer 1

我最终没有使用django-crispy-forms ，我现在正在使用 Django 模板语言编写自己的自定义表单模板。Jasny Bootstrap 文件上传以这种方式工作得很好。