HTML5：dropzoneで落とされた画像をimgタグで表示する

Question

現在、HTML5のdropzoneを使用してpngファイルをftpサーバーにアップロードする小さなWebページを設計しています。ユーザーが有効な画像をドロップゾーンにドロップすると、<img ... />タグ内に画像を提示したいと思います。私はdropzoneのjavascriptコードを得て、MYPICTUREID.src = file.name;を使ってsrc属性を変更しようとしました。これは機能しません.file.nameはパス全体ではなく、名前だけを示します。私が読んだところでは、安全性の制約のためにユーザーのデバイス上のローカルファイルへのパスを取得できないということです。ユーザーのプレビューを作成するにはどうすればよいでしょうか？

Answer 1

私は問題の簡単な解決策が見つかりました：あなたがアップロードしたファイルのためのpathesを生成することができ_URL.createObjectURL(file)を使用して

を。あなたはこれを実現するためにFileReader.readAsDataURLを使用することができます

var _URL = window.URL || window.webkitURL; 
_URL.createObjectURL(file); 

Answer 2

：

これは本当にわずか2行です。

var dropbox = document.getElementById("dropbox"); 
 
dropbox.addEventListener("dragenter", dragenter, false); 
 
dropbox.addEventListener("dragover", dragover, false); 
 
dropbox.addEventListener("drop", drop, false); 
 

 
function dragenter(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
} 
 

 
function dragover(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
} 
 

 
function drop(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 

 
    var dt = e.dataTransfer, 
 
     file = dt.files[0], 
 
     img = document.createElement('img'), 
 
     reader = new FileReader(); 
 
    
 
    dropbox.appendChild(img); 
 

 
    reader.onload = function(e) { 
 
    img.src = e.target.result; 
 
    }; 
 
    
 
    reader.readAsDataURL(file); 
 
}

#dropbox { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
}

<div id="dropbox"></div>