如何在django中呈现上传的文件？

Question

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

Answer 1

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

这个想法是：

1. 处理输入[type =＆＃39; file＆＃39;]已更改

2. 创建FileReader

3. 在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，但它不是那么好，因为它让用户下载文件，而他已经将它放在驱动器上。