HTML5：在img標籤中顯示圖像dropzone丟失

我目前正在設計一個小型網頁，讓您使用HTML5中的dropzone將png文件上傳到ftp服務器。當用戶將有效圖像放入dropzone時，我想在<img ... />標籤內顯示圖像。我得到了dropzone的javascript代碼，並試圖使用MYPICTUREID.src = file.name;來更改src屬性。這是行不通的，因爲file.name只給你名字，而不是整個路徑。從我讀到的是，由於安全限制，您無法獲取用戶設備上本地文件的路徑。什麼是爲用戶創建預覽的最佳方式？HTML5：在img標籤中顯示圖像dropzone丟失

來源

2016-07-22 Nerethar

如果你有興趣，http://dropzonejs.com已經這樣做真的很好 –

這確實是很不錯的，但我有我不得不非常具體的佈局在此頁面上使用，並且以正確的方式進行配置將非常耗時。但這似乎是一個非常有趣的項目。 – Nerethar

我發現了一個簡單的解決問題的方法：使用_URL.createObjectURL(file)可以生成上傳的文件pathes

。

這其實只是兩行：

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

來源

2016-07-22 15:53:22 Nerethar

您可以使用FileReader.readAsDataURL做到這一點。

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>

來源

2016-07-22 15:55:03

HTML5：在img標籤中顯示圖像dropzone丟失

回答

相關問題