在使用javascript上傳之前在彈出窗口中預覽圖像

Question

我能夠在除圖像之外的彈出窗口上顯示所有表單域。圖像直接顯示在表單上。在提交之前，它也應該顯示在彈出窗口和其他字段中。

function openPreview() 
{ 
var title = document.getElementById("title").value; 
var msg= document.ElementByClassName("nicEdit-main")[0].innerHTML; 
var category = document.getElementById("category").value; 
var status = document.getElementById("status").value; 
var oFReader= new FileReader(); 
oFReader.readAsDataURL(document.getElementById("fileupload").files[0]); 
oFReader.onload = function (oFREvent) { 
document.getElementById("uploadPreview").src = oFREvent.target.result; 
}; 
var popWin=window.open(title, 'Preview_Entry'); 
popWin.document.write('Title:' + title + '<br /> Message:' + msg + '<br /> Category: ' + category + '<br /> Status:' + status + oFReader); 
} 

Answer 1

變化的最後一行應該給你所需要的輸出

var oFReader= new FileReader(); 
var imgUrl; 
oFReader.readAsDataURL(document.getElementById("fileupload").files[0]); 
oFReader.onload = function (oFREvent) { 
document.getElementById("uploadPreview").src = oFREvent.target.result; 
imgUrl=oFREvent.target.result; 
}; 
var popWin=window.open(title, 'Preview_Entry'); 
popWin.document.write('Title:' + title + '<br /> Message:' + msg + '<br />  Category: ' + category + '<br /> Status:' + status + '<br />' +"<img src='" + imgUrl + "' />); 

Answer 2

你需要一次將圖像數據加載到打開彈出。這樣你就可以相應地設置預覽圖像的src。試試這個：

var oFReader= new FileReader(); 
oFReader.readAsDataURL(document.getElementById("fileupload").files[0]); 
oFReader.onload = function (oFREvent) { 
    var popWin=window.open('about:blank', 'Preview_Entry'); 
    popWin.document.write('Title:' + title + 
    '<br /> Message:' + msg + 
    '<br />  Category: ' + category + 
    '<br /> Status:' + status + 
    '<br />' + 
    '<img src="' + oFREvent.target.result + '" /> '); 
    popWin.document.close(); 
};