问题描述
我有一个按预期工作的Django CreateView。我允许用户附加照片，然后单击提交后，视图将按预期捕获图像。但是，我试图找出是否有一种方法可以使用CreateView显示已捕获的图像。截至目前，它显示的是文件名，但我正在尝试使其显示图像。我尝试了这种SO问题的变体，但它不是针对CreateView的，我不知道该如何翻译。
I have a Django CreateView that works as expected. I allow the user to attach a photo and then after they click Submit, the view captures the image as expected. However, I am trying to figure out if there is a way, using CreateView, to show the image that has been captured. As of right now, it shows the file name, but I am trying to get it to show the image instead. I tried a variation of this SO question, but it is not for CreateView and I can't figure out how to translate it. Render image without saving
此处是我的简单示例，可以正常工作。
Here is my simple example, that works as expected.
我的模型...
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 CreateNewAuthorForm(forms.ModelForm):
class Meta:
model = NewAuthor
fields = ['image',]
我的HTML ...
My HTML...
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="picture">
{{ form.image }}
</div>
如何合并代码，使上传的图像在用户点击之前实际显示提交？
How can I incorporate code that will allow the image that was uploaded to actually be displayed before the user hits submit?
在此先感谢您提供任何建议。
Thanks in advance for any suggestions.
推荐答案
如果使用Django模板而不是使用服务器端渲染（SSR）。
If you are using Django templates than it's Server-Side Rendering (SSR).
这意味着所提供的HTML页面在后端呈现，然后发送到浏览器。您必须使用JavaScript来做您想做的事情。
Which mean the HTML pages that are served are rendered at the backend and then sent to the browser. You have to use javascript to do what you are trying to do.
一个Javascript示例来显示已附加的图像/文件。
这是执行类似操作的代码
A Javascript example to display the image/file that has been attached.Here is a code to do something like that
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]);
}
}
解决方案取自
这篇关于提交前使用Django CreateView查看图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！