Django with Bootstrap-file-upload

Question

我使用的是Django表单来加载图像，我使用的是Bootstap-fileinput。

当窗体已经用图像初始化时，我希望立即显示图像，但它现在简单地显示没有图像。如何让模板自动显示Bootstap HTML的file-input-exists版本而不是file-input-new版本？

Forms.py：

class MyModelForm(forms.ModelForm): 
    class Meta: 
     model = MyModel 
     fields = ['image',] 
     widget = { 
      'image' : forms.FileInput(attrs={'class': 'form-control', 
              'id' : 'input-file'}), 
      } 

我的模板有：

{{form.image}} 
{{form.image.errors}} 

这将生成以下HTML表单是否包含一个图像或不

<div class="file-input file-input-new"><div class="file-preview "> 
    <div class="close fileinput-remove">×</div> 
    <div class=""> 
     <div class="file-preview-thumbnails"></div> 
     <div class="clearfix"></div>  
     <div class="file-preview-status text-center text-success"></div> 
     <div class="kv-fileinput-error file-error-message" style="display: none;"></div> 
    </div> 
</div> 
<div class="kv-upload-progress hide"></div> 
<div class="input-group "> 
    <div tabindex="500" class="form-control file-caption kv-fileinput-caption"> 
     <div class="file-caption-name"></div> 
    </div> 

    <div class="input-group-btn"> 
     <button type="button" tabindex="500" title="Clear selected files" class="btn btn-default fileinput-remove fileinput-remove-button"><i class="glyphicon glyphicon-trash"></i> Remove</button> 
     <button type="button" tabindex="500" title="Abort ongoing upload" class="btn btn-default hide fileinput-cancel fileinput-cancel-button"><i class="glyphicon glyphicon-ban-circle"></i> Cancel</button> 

     <div tabindex="500" class="btn btn-primary btn-file"><i class="glyphicon glyphicon-folder-open"></i> &nbsp;Browse …<input class="form-control" id="input-file" name="image" type="file" required=""></div> 
    </div> 
</div> 

** EDI T ** 感谢迄今为止的帮助，我现在已经显示图像，但是如果我尝试重新提交表单，我会收到一条消息，指出没有选择任何文件。我也需要选择这个。

我已添加此JavaScript，以便在加载时显示图像。

<script> 

    $("#input-file").fileinput({ 
     showUpload: false, 
     initialPreviewShowDelete: false, 

     {% if form.instance.image %} 
     initialPreview: [ 
      "<img src='{{ form.instance.image.url }}' class='file-preview-frame'>", 
     ], 
     initialPreviewConfig: [ 
      {caption: "{{ form.instance.image.name}}",}, 
     ], 
     {% endif %} 
    }); 

    </script> 

Answer 1

我使用这个脚本

<script> 
$(document).ready(function(){ 
    $("#id_album_logo").fileinput({ 
    showUpload: false, 
    showCaption: false, 
    browseClass: "btn btn-primary btn-lg", 
    fileType: "any", 
    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
    overwriteInitial: false, 
    initialPreviewAsData: true, 
    {% if form.instance.album_logo %} 
    initialPreview: [ 
     "{{ form.instance.album_logo.url }}", 
    ], 
    initialPreviewConfig: [ 
     {caption: "{{ form.instance.album_logo.name}}", width: "120px", url: "{$url}", key: 1}, 
    ], 
    {% endif %} 
}); 
}) 

其中id_album_logo是分配给形成输入ID，得到保存的数据库文件的预览

initialPreview: [ "{{ form.instance.album_logo.url }}", ],

是已保存图像的网址d数据库

我的models.py

class Album(models.Model): 
user = models.ForeignKey(User) 
album_logo=models.FileField(upload_to=upload_location) 

我forms.html是

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-sm-6 col-md-6 col-lg-6 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"> 
      <form action="" method="post" enctype="multipart/form-data"> 
       {% csrf_token %} 
       {% include 'form-template.html' %} 
        <div class="form-group"> 
         <br> 
         <button type="submit" class="btn btn-success">Submit</button> 
        </div> 
      </form> 
    </div> 
</div> 

和形式，template.html是

{% for field in form %} 

<div class="form-group djfr"> 
     <label class="control-label">{{ field.label_tag }}</label> 
     {{ field }} 
    <span class="text-danger small">{{ field.errors }}</span> 
</div> 

{% endfor %}