Javascript 浏览图像并插入Iframe

我想知道这是否可能

我想创建一个函数来检索图像并插入到iframe中。用户必须能够选择文件（图像/视频）并将其插入iframe

main.html

我使用它让用户选择文件

这是iframe的。iframe src是另一个html文档

insert.html

位于需要插入图像的insert.html中

我不太明白如何使用javascript从用户选择中检索图像并插入iframe

---

这可能吗？

如果iframe来自同一个域，则可以直接从另一个域操纵iframe

看

如果不是这样，您可以做的是：

在两个页面之间设置通信流程（请参阅）

或

---

将文件上载到服务器，然后刷新“insert.html”页面以显示上载的图像。

是的，下面是一个示例。关键是钩住iframe，然后使用它的

contentWindow

编辑

另外，我不知道你是指浏览文件还是拖放API，所以我实现了这两个

来自以下来源的大量帮助：

• ：如何与文件api交互
• ：拖放时要关闭的事件

这是一把小提琴：

CSS

 *{
    font-family: Arial;
 }
 .section{
    width: 400px;
    padding: 20px;
    margin: auto;
 }
 #dragDiv{
    background-color: #ffffcc;
 }
 #browseDiv{
    background-color: #ccffcc;
 }
 #iframeDiv{
    background-color: #ffcccc;
 }
 #dropTarget{
    width: 300px;
    height: 300px;
    border-style: dashed;
    border-width: 5px;
 }
 .dropEnabled{
    border-color: #999999;
 }
 .dropEnabled:hover{
    border-color: #ff9933;
 }
 .dropMe{
    border-color: #99ff99;
 }

 /**
  * I set up the listeners for dragging and dropping as well
  * as creating an iFrame for holding dragged in images
  * @returns {undefined}
  */
 function main() {
    // The div that receives drops and the new iFrame
    var targetDiv = document.getElementById("dropTarget"),
            iframe = document.createElement("iframe");

    // Set the iframe to a blank page
    iframe.src = "about:blank";

    // Append it to the target
    document.getElementById("iframeTarget").appendChild(iframe);

    // Drag over is when an object is hovering over the div
    // e.preventDefault keeps the page from changing
    targetDiv.addEventListener("dragover", function(e) {
       e.preventDefault();
       this.className = "dropMe";
    }, false);

    // Drag leave is when the object leaves the div but isn't dropped
    targetDiv.addEventListener("dragleave", function(e) {
       e.preventDefault();
       this.className = "dropEnabled";
    }, false);

    // Drop is when the click is released
    targetDiv.addEventListener("drop", function(e) {
       e.preventDefault();
       this.className = "dropEnabled";
       loadFile(e.dataTransfer.files[0], iframe);
    }, false);

    document.getElementById("upload").addEventListener("click", function() {
       var file = document.getElementById("browsedFile").files[0];
       loadFile(file, iframe);
    }, false);
 }

 /**
  * Load a file and then put it on an ifrmae
  * @param {Element} f The file that needs to get loaded
  * @param {Element} destination The iframe that the file is appended to
  * @returns {undefined}
  */
 function loadFile(f, destination) {
    // Make a file reader to interpret the file
    var reader = new FileReader();

    // When the reader is done reading,
    // Make a new image tag and append it to the iFrame
    reader.onload = function(event) {
       var newImage = document.createElement("img");
       newImage.src = event.target.result;
       destination.contentWindow.document.getElementsByTagName("body")[0].appendChild(newImage);
    };

    // Tell the reader to start reading asynchrounously
    reader.readAsDataURL(f);
 }

 // Run the main script
 window.onload = main;

JS

 *{
    font-family: Arial;
 }
 .section{
    width: 400px;
    padding: 20px;
    margin: auto;
 }
 #dragDiv{
    background-color: #ffffcc;
 }
 #browseDiv{
    background-color: #ccffcc;
 }
 #iframeDiv{
    background-color: #ffcccc;
 }
 #dropTarget{
    width: 300px;
    height: 300px;
    border-style: dashed;
    border-width: 5px;
 }
 .dropEnabled{
    border-color: #999999;
 }
 .dropEnabled:hover{
    border-color: #ff9933;
 }
 .dropMe{
    border-color: #99ff99;
 }

 /**
  * I set up the listeners for dragging and dropping as well
  * as creating an iFrame for holding dragged in images
  * @returns {undefined}
  */
 function main() {
    // The div that receives drops and the new iFrame
    var targetDiv = document.getElementById("dropTarget"),
            iframe = document.createElement("iframe");

    // Set the iframe to a blank page
    iframe.src = "about:blank";

    // Append it to the target
    document.getElementById("iframeTarget").appendChild(iframe);

    // Drag over is when an object is hovering over the div
    // e.preventDefault keeps the page from changing
    targetDiv.addEventListener("dragover", function(e) {
       e.preventDefault();
       this.className = "dropMe";
    }, false);

    // Drag leave is when the object leaves the div but isn't dropped
    targetDiv.addEventListener("dragleave", function(e) {
       e.preventDefault();
       this.className = "dropEnabled";
    }, false);

    // Drop is when the click is released
    targetDiv.addEventListener("drop", function(e) {
       e.preventDefault();
       this.className = "dropEnabled";
       loadFile(e.dataTransfer.files[0], iframe);
    }, false);

    document.getElementById("upload").addEventListener("click", function() {
       var file = document.getElementById("browsedFile").files[0];
       loadFile(file, iframe);
    }, false);
 }

 /**
  * Load a file and then put it on an ifrmae
  * @param {Element} f The file that needs to get loaded
  * @param {Element} destination The iframe that the file is appended to
  * @returns {undefined}
  */
 function loadFile(f, destination) {
    // Make a file reader to interpret the file
    var reader = new FileReader();

    // When the reader is done reading,
    // Make a new image tag and append it to the iFrame
    reader.onload = function(event) {
       var newImage = document.createElement("img");
       newImage.src = event.target.result;
       destination.contentWindow.document.getElementsByTagName("body")[0].appendChild(newImage);
    };

    // Tell the reader to start reading asynchrounously
    reader.readAsDataURL(f);
 }

 // Run the main script
 window.onload = main;

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>I framed it</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
   </head>
   <body>
      <div id="dragDiv" class="section">
         <div>The div below receives dragged in files</div>
         <div id="dropTarget" class="dropEnabled"></div>
      </div>
      <div id="browseDiv" class="section">
         <div>I upload stuff the boring way</div>
         <input type="file" id="browsedFile"><button id="upload">Upload</button>
      </div>
      <div id="iframeDiv" class="section">
         <div>And below me, an iFrame gets created</div>
         <div id="iframeTarget"></div>
      </div>
   </body>
</html>

---

如果iframe与主窗口位于同一域中，则可以对其进行操作。@Barmar谢谢，我的错。我从来没有尝试过做相同的领域，我只是记得相反的是不可能的…谢谢，但我希望用户选择自己的形象，这就是为什么我使用标签。那么我如何检索他们的图像并将其插入iframe？@User好的，试试这个。它使用HTML5中的

和拖放API。谢谢，我现在正在测试它。虽然我一直尝试在IE和Chrome上使用它，但它似乎在JSFIDLE上工作。JS中有一个错误不断弹出JavaScript运行时错误：无法获取未定义或空引用的属性“addEventListener”。在IE或Chrome中？每当我遇到这个错误时，我都会将DOM中元素的

id

与

getElementById

调用不匹配。仔细检查这些ID是否匹配。如果你发布一堆代码，我可以再检查一遍。另外，如果这只发生在您运行IE时，您使用的是哪个版本的IE？直到第9版，Internet Explorer才支持

addEventListener

。我在IE和Chrome上都试过了，但都不适用。虽然我告诉我错误在哪里。这是IE9。我在发现错误的地方使用了你的代码。所以我会检查身份证