Question

我有一个按预期工作的Django CreateView。我允许用户附加照片，然后单击“提交”后，视图将按预期捕获图像。但是，我试图找出是否有一种方法可以使用CreateView显示已捕获的图像。截至目前，它显示的是文件名，但我正在尝试使其显示图像。我尝试了这种SO问题的变体，但它不适用于CreateView，而且我不知道如何翻译。 Render image without saving

这是我的简单示例，可以正常工作。

我的模特...

class NewAuthor(models.Model):

image = models.ImageField(upload_to='images/',default='images/pic.jpg')

我的看法。...

class CreateNewAuthorView(CreateView,NeverCacheMixin):
    model = NewAuthor
    form_class = CreateNewAuthorForm
    template_name = 'create_new_author.html'

我的表格...

Class CreateNewAuthorForm（forms.ModelForm）：

class Meta:
    model = NewAuthor
    fields = ['image',]

我的HTML ...

<form method="POST" enctype="multipart/form-data">

{% csrf_token %}

    <div class="picture">
      {{ form.image }}
    </div>

如何合并代码，以允许在用户点击提交之前实际显示上载的图像？

预先感谢您的任何建议。

Answer 1

如果您使用的是Django模板，则它是服务器端渲染（SSR）。

这意味着所提供的HTML页面在后端呈现，然后发送到浏览器。您必须使用javascript来做您想做的事情。

一个Javascript示例，用于显示已附加的图像/文件。这是执行类似操作的代码

HTML代码

<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</body>
</html>

JS

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#blah')
        .attr('src', e.target.result)
        .width(150)
        .height(200);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

解决方案来自this answer

提交前使用Django CreateView查看图像

1 个答案: