在 Django 中选择文件后预览照片

Question

我找不到关于这个主题的信息。如何轻松创建一个选择照片后（保存表单之前）在 Django 中预览照片。如下面的视频所示：

是否有任何简单的插件可以启用此功能？我认为这种模式下发送照片很流行（即照片的缩略图，在保存整个模型之前）。

Answer 1

在您的 django 模板中，您可以编写一个小脚本来显示用户选择的图像的预览。在模板中：

<!-- To display image -->
<img id="myimage" src="xyz" > </div>

<!-- To upload new image -->
<input name="images" onchange="readURL(this);" type="file" accept="image/*"/>

在同一模板中：

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#myimage').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

</script>

在 Django 中选择文件后预览照片

Preview the photo after selecting the file in Django

django

imagefield