如何在django中渲染上傳的文件？

Question

我做了一個django應用程序，它從用戶處獲取輸入圖像並提供文件所在位置的路徑。我希望將此圖像呈現在html頁面上。任何評論/想法

Answer 1

這很簡單。實際上，你不必等待迴應。您可以使用的FileReader： https://developer.mozilla.org/ru/docs/Web/API/FileReader

的理念是：

1. 處理輸入[類型= '文件']改變

2. 創建的FileReader以base64格式

3. 顯示字符串in img [src =]

   <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，但它不是很好，因爲它使得用戶可以下載文件，而他已經將文件放在驅動器上。