Python Django与引导文件上载

我使用Django表单加载一个映像，并使用Bootstap fileinput

当表单已经用图像初始化时，我希望立即显示图像，但它当前没有显示图像。如何让模板自动显示Bootstap HTML的文件输入存在版本，而不是文件输入新版本

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>

**编辑** 感谢到目前为止的帮助，我现在已经显示了图像，但是如果我尝试重新提交表单，我会收到一条消息，没有选择任何文件。我也要把它捡起来

我添加了这个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>

---

我正在使用此脚本预览保存的数据库文件

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

我的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>

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

---

无法理解您的问题。您想在浏览中选择图像时显示图像，还是未显示初始化图像？@Rohit Chopra-当我使用浏览选择图像时，它会显示图像，但如果我想编辑表单，因此我使用记录对其进行初始化，它不会显示预加载的图像，而会显示所有其他数据。我希望它显示的图像时，它已初始化从formcheck这个问题，它是你的一样@罗希特·乔普拉——这不是同一个问题。Bootstrap在我的表单字段周围“构建”文件输入标记，以便它显示得很好，然后给我一些时间今晚上传答案。我已尝试将其复制到我的模板中，将“album_徽标”替换为“image”，但我仍然无法加载任何内容。我可以看到脚本中的图像url，因此可以正常工作，但是我的{{form.image}}调用中似乎没有出现任何id，它应该与您的{{field}相同。这几乎就是通过在chrome中检查element developer工具获取id表单输入文件字段并将该id应用于脚本的解决方案，这就是我所做的。我在该区域内的唯一id是，我使用了$input file.fileinput{…但是它没有加载一些它找不到的图像，因为它们不在那里。与此无关

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