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

【问题标题】：Preview an image on a popup Window before Upload using javascript在使用 javascript 上传之前在弹出窗口中预览图像
【发布时间】：2017-03-02 07:58:41
【问题描述】：

我能够在弹出窗口上显示除图像之外的所有表单域。图像直接显示在表单上。在提交之前，它还应该与其他字段一起显示在弹出窗口中。

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

【问题讨论】：

您正在主窗口上设置图像的src。相反，您应该在弹出窗口上创建一个图像标签并将其设置为 src
我创建了一个 var 并将其写入 popWin.document.write。但我在显示它时遇到了问题。 popWin.document.write('Title: ' + title + '
Message: ' + msg + '
Category: ' + category + '
Status: ' + status + imgUrl );

标签： javascript popupwindow preview image-upload

【解决方案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 + "' /> );

【讨论】：

我想你忘了关闭它。所以我编辑为 + '' );但它仍然在弹出窗口上显示错误！
你得到的错误是什么？可以发一下吗？
我在弹出窗口中看到了这个。但是图像正在我的表单上显示！ HTTP 状态 404 - /MobileAppProj/Title
您需要将基本 URL 传递给弹出窗口 window.window.open("Your base URL", title, 'Preview_Entry')。如果可行，请将我的答案标记为答案
我尝试插入我的基本 URL，但它正在我的弹出窗口中打开主页

【解决方案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();
};

【讨论】：

我试过这个方法，但是当我点击我的预览按钮时没有任何反应！也没有弹出窗口。以及为什么要删除此行： document.getElementById("uploadPreview").src = oFREvent.target.result;
document.getElementById("uploadPreview").src = oFREvent.target.result; 将在您的主窗口/表单中显示图像.. 我想您不想要它。这段代码正在我的本地机器上运行。如果弹出窗口未打开，则加载图像时可能存在一些错误。您在控制台中遇到什么错误？
是的，正确。我不希望图像显示在表单上，而是显示在弹出窗口上。我的控制台上没有任何错误。只是当我按下预览按钮时没有执行任何操作。