在提交之前使用 Django CreateView 查看图像

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 模板而不是 Server-Side 呈现 (SSR)。

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

一个Javascript示例显示已附加的image/file。这是执行类似操作的代码

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 查看图像

View an Image Using Django CreateView Before Submitting

django

django-templates

django-forms

django-views

data-uri