在使用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);
}

函数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 of reader=new FileReader（）； readAsDataURL（document.getElementById（“fileupload”）.files[0]）； oFReader.onload=函数（OFRENT）{ document.getElementById（“uploadPreview”）.src=ofretent.target.result； }; var popWin=window.open（标题为“预览条目”）； popWin.document.write（'Title:'+Title+'
消息：'+msg+'
类别：'+Category+'
状态：'+Status+oFReader）； }

---

最后一行中的更改应提供所需的输出

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

var of reader=newfilereader（）；
var imgUrl；
readAsDataURL（document.getElementById（“fileupload”）.files[0]）；
oFReader.onload=函数（OFRENT）{
document.getElementById（“uploadPreview”）.src=ofretent.target.result；
imgUrl=ofretent.target.result；
};
var popWin=window.open（标题为“预览条目”）；
popWin.document.write（'Title:'+Title+'
消息：'+msg+'
类别：'+Category+'
状态：'+Status+'
'+）；

加载图像数据后，您需要打开弹出窗口。这样您就可以相应地设置预览图像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();
};

var of reader=newfilereader（）；
readAsDataURL（document.getElementById（“fileupload”）.files[0]）；
oFReader.onload=函数（OFRENT）{
var popWin=window.open（'about:blank'，'Preview_Entry'）；
popWin.document.write（'Title:'+Title+
“
消息：”+msg+
“
类别：”+类别+
“
状态：”+状态+
“
”+
' ');
popWin.document.close（）；
};

您正在主窗口上设置图像的

src

。相反，您应该在弹出窗口上创建一个图像标记，并将其设置为

src

我创建了一个var，并将其写入了popWin.document.write。但我在显示它时遇到了一个问题。popWin.document.write（'Title:'+Title+'
消息：'+msg+'
类别：'+Category+'
状态：'+Status+imgUrl）；我想你忘了关闭它。所以我编辑为+''）；但它仍然在弹出窗口上显示错误！您得到的错误是什么？您可以发布它吗？我在弹出窗口中看到了这一点。但是图像正在我的表单上显示！HTTP Status 404-/mobileapproj/TitleYou需要将您的基本URL传递到弹出窗口。Window.open（“您的基本URL”），标题为“预览条目”）。如果成功，请将我的答案标记为回答我尝试插入我的基本URL，但它正在打开我弹出窗口的主页我尝试了此方法，但当我单击预览按钮时，什么也没有发生！也没有弹出窗口。为什么要删除这一行：document.getElementById（“uploadPreview”）.src=ofretent.target.result

document.getElementById（“uploadPreview”）.src=ofretent.target.result将在主窗口/窗体中显示图像。。我想你不想要它。这个代码在我的本地机器上运行。如果弹出窗口未打开，则加载图像时可能会出现一些错误。控制台中出现了什么错误？是的，正确。我不希望图像显示在窗体上，而是显示在弹出窗口上。我的控制台上没有任何错误。只是当我按下预览按钮时，没有执行任何操作。