在使用javascript上传之前在弹出窗口中预览图像

我能够在除图像之外的弹出窗口上显示所有表单域。图像直接显示在表单上。在提交之前，它也应该显示在弹出窗口和其他字段中。在使用javascript上传之前在弹出窗口中预览图像

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

来源

2017-03-02 Rev

您正在设置主窗口上图像的“src”。相反，你应该在弹出窗口上创建一个图像标签，并将其设置为'src' –

我创建了一个var并将其写入popWin.document.write中。但我正面临着显示它的问题。 popWin.document.write（'标题：'+标题+'
消息：'+ msg +'
分类：'+ category +'
状态：'+ status + imgUrl）; – Rev

变化的最后一行应该给你所需要的输出

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 + "' />);

来源

2017-03-02 08:08:02

我想你忘了关闭它。所以我编辑为+''）;但它仍然在弹出式窗口中显示错误！ – Rev

你得到的错误是什么？你可以请张贴吗？ –

我在弹出的窗口中看到了这个。但图像正在我的表单上显示！ HTTP状态404 -/MobileAppProj /标题 – Rev

你需要一次将图像数据加载到打开弹出。这样你就可以相应地设置预览图像的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(); 
};

来源

2017-03-03 06:34:14

我试过这种方法，但没有任何反应，当我点击我的预览按钮！没有窗口也弹出。为什么你删除这行：document.getElementById（“uploadPreview”）。src = oFREvent.target.result; – Rev

'document.getElementById（“uploadPreview”）。src = oFREvent.target.result; '将在主窗口/窗体中显示图像..我想你不想要它。而这段代码正在我的本地机器上运行。如果popup没有打开，那么加载图像时可能会出现一些错误。你在控制台遇到什么错误？ –

是的。我不希望图像显示在窗体上，而是在弹出的窗口上。我在控制台上没有收到任何错误。只是当我按下我的预览按钮时没有执行任何操作。 – Rev

在使用javascript上传之前在弹出窗口中预览图像

回答

相关问题