如何在 django 中渲染上传的文件？答案

【问题标题】：How to render a uploaded file in django?如何在 django 中渲染上传的文件？
【发布时间】：2017-02-09 17:56:53
【问题描述】：

我制作了一个 django 应用程序，它从用户那里获取输入图像并提供文件所在的路径。我希望在 html 页面上呈现此图像。任何 cmets/ideas

【问题讨论】：

标签： javascript django upload

【解决方案1】：

这很简单。实际上，您不必等待响应。您可以使用 FileReader： https://developer.mozilla.org/ru/docs/Web/API/FileReader

想法是：

句柄输入[type='file'] 已更改
创建文件读取器

在img[src=]中以base64格式显示字符串

<input type="file" accept="image/jpeg,image/png,image/gif" id="img_input">

函数定义：

function handleFile(e) {
    var self = this;
    var reader = new FileReader();
    var file = e.target.files[0];

    reader.onload = function(upload) {
        var currentImageData = upload.target.result;
        var imgElem = document.createElement('img');
        imgElem.setAttribute('src', currentImageData);
        document.body.appendChild(imgElem);
    }

    reader.readAsDataURL(file);
}

document.querySelector('#img_input').addEventListener('change', handleFile);

就是这样。

另一种方法是等待 AJAX 响应并将图像路径附加到 img-element，但这不太好，因为它使用户在驱动器上已有文件时下载文件。

【讨论】：

你能详细说明一下什么是 Filereader。我使用 FileSystemStorage 来保存图像。
它在客户端，而不是 django 端。此代码在上传之前显示图像。 FileReader 是浏览器中包含的 WebAPI 的一部分。它提供了获取图像为base64字符串的简单方法，可以在img-element的src-attribute中显示。