팝업에서 이미지 미리보기 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(); 
};