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 %}