浏览图像并将其传递给弹出窗口答案

【问题标题】：Browse Image and pass it to popup window浏览图像并将其传递给弹出窗口
【发布时间】：2015-07-04 01:34:09
【问题描述】：

我想在我的 HTML 脚本中浏览一个图像，然后打开一个弹出窗口，浏览的图像将出现在其中。

现在他正在打开原始脚本中的图像。但是如何将它传递给 ShowImage.html 弹出窗口？

function newwindow(event){
           var pop = window.open("ShowImage.html", "Image","width=200, height=100");
           document.getElementById('output');
           output.src = URL.createObjectURL(event.target.files[0]);
        }

<label>
        Browse File
        <input id="Browse" type="file" style="display: none" checked= true onchange="newwindow(event)">
    </label>

    <img id="output"/>

【问题讨论】：

我正在尝试了解您真正想要实现的目标... 1) 图像将显示在同一页面还是不同的对话框中...据我所知，您正在使用 id=output 在同一页面上的图像元素标签上绘制图像。
是的，我想在另一页（弹出窗口）上绘制图像。图像将从第一页浏览，然后在出现的弹出窗口中可视化。在我上面的代码中，图像仍然在第一页。我不知道如何将它发送到弹出窗口。

标签： javascript html image file popup

【解决方案1】：

我现在使用 JQuery 来显示图像。它也不是我真正想要的，但它工作得很好。

function showImage(event) {
  var outputImg = document.getElementById('output');
  outputImg.src = URL.createObjectURL(event.target.files[0]);

  $(function() {
    $("#dialog").dialog();
  })
}

<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<input id="Browse" type="file" onchange="showImage(event)">


<div id="dialog" title="Basic dialog">
  <img id="output" />

【讨论】：

【解决方案2】：

如果您的内容不敏感

，您可以通过window.opener 方法访问网址参数

$(document).ready(function(){
$('#Browse').change(function(){ 

    var outputImg = document.getElementById('output');



           outputImg.src = URL.createObjectURL(event.target.files[0]);

    window.open("ShowImage.html?imgDetails="+outputImg.src, "Image","width=200, height=100");
});
});

//window.opener.location.href

这应该对你有帮助。

【讨论】：

我试过你的方法。他正在打开弹出窗口。但它是空的。我需要在弹出窗口的 html 脚本中编写代码吗？评论 window.opener.location.href 是什么意思？
使用 window 对象的这个属性，您可以访问 url，因此您可以从 URL 访问图像源参数。因此 window.opener.location.href 仅保留供您参考使用。

【解决方案3】：

您可以添加#image.jpg

var pop = window.open("NewImage.html#image.jpg", "PopupWindow","width=200, height=100");

所以在您的 NewImage.html 中，您需要这样的脚本：

location.hash

哈哈

您现在可以使用它来创建带有散列的图像。

【讨论】：

对不起，我真的不明白。我像你说的那样添加了#image.jpg。我将 location.hash 添加到弹出窗口的脚本中。它不工作:(
当然不行！数据在 location.hash 中，现在您必须从 javascript 创建 HTML 以通过 location.hash 呈现 <img src="lol.jpg">
我真的不明白他是如何知道#image.jpg 是我在中浏览的文件？您能否向我发送您试图向我解释的示例代码？
不确定是否理解您的问题，您已经使用event.target.files[0]，所以您知道如何获取图像，对吧？
是的，我知道如何在父页面获取图像。现在我只是通过浏览功能获取图像并在父页面上使用 id“输出”写入图像元素。但是，我真的不知道如何将图像传递到弹出窗口，然后在弹出窗口中打开它。使用哈希似乎是一个好主意。但我真的不知道如何正确使用它。我是新手。