アップロードされたファイルをdjangoでレンダリングするには？

Question

ユーザーからの入力イメージを受け取り、そのファイルがどこにあるかに関するパスを提供するdjangoアプリケーションを作成しました。このイメージをHTMLページにレンダリングします。すべてのコメント/アイデア

Answer 1

非常に簡単です。あなたは実際には、応答を待つ必要はありません。あなたは、FileReaderのを使用することができます。 https://developer.mozilla.org/ru/docs/Web/API/FileReader

考え方は次のとおりです。

は

1. ハンドル入力[タイプ= 'ファイル']はbase64形式でFileReaderの

2. 表示文字列を作成します

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); 

ことです。

もう1つの方法は、AJAXレスポンスを待ってイメージパスをimg-elementに追加することですが、ユーザーが既にドライブにファイルをダウンロードしている間にファイルをダウンロードさせてしまうため、あまり良くありません。