正在将图像从父帧加载到子帧

Loading image from parent frame to child

本文关键字:加载 图像      更新时间:2023-09-26

我的主页上有一个上传按钮,它提交到php表单,然后将图像返回主页。我现在要做的是将image元素加载到父页中的Iframe中,作为一个变量,我可以将其放入div中。在图像不会显示在Iframe的部分之前,一切都正常工作,我认为我已经接近了,但看不到我的代码中出了什么问题。

index.html仅显示消息的javascript、iframe和id

    <script type="text/javascript">
    function updatepicture(pic) {
    document.getElementById("image").setAttribute("src", pic);
    $("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
}
</script>
<iframe id="iFrameThingy" src="Templates/template2/index.html" width="100%" height="4500" name="search_iframe"></iframe>
<p id="message">Upload message will go here.</p>

iframe.html

    <script type="text/javascript">
function updatepicture(pic){
    document.getElementById("image").setAttribute("src",pic);
}
</script>
--> Where I am trying to place the image
        <div class="caption2">
        <img id="productImage"  id="images/product.png"alt="Product" height="416" width="417"> 
    </div>

我曾一度这样做,但错误地改变了一些东西,现在它不起作用了,但我知道我已经接近了。任何帮助都会通知

上传.php

<?php
if ($_FILES['file']['size'] > 0) {
if ($_FILES['file']['size'] <= 153600) {
    if (move_uploaded_file($_FILES['file']['tmp_name'], "images/".$_FILES['file']["name"])) {
        // file uploaded
        ?>
        <script type="text/javascript">
        parent.document.getElementById("message").innerHTML = "";
        parent.document.getElementById("file").value = "";
        window.parent.updatepicture("<?php echo 'images/'.$_FILES['file']["name"]; ?>");
        </script>
        <?php
    } else {
        // the upload failed
        ?>
        <script type="text/javascript">
        parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>There was an error uploading your image. Please try again later.</font>";
        </script>           
        <?php
    }
} else {
    // the file is too big
    ?>
    <script type="text/javascript">
    parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>Your file is larger than 150kb. Please choose a different picture.</font>";
    </script>
    <?php
    }
}
?>  

index.html(提交表单)

<form id="form" method="post" action="upload.php" enctype="multipart/form-data" target="iframe">
<input type="file" id="file" name="file" />
<input type="submit" name="submit" id="submit" value="Upload File" />

上传消息将转到此处。



更改此行:

document.getElementById("image").setAttribute("src",pic);

到此:

document.getElementById("productImage").setAttribute("src",pic);

改变这个:

<img id="productImage"  id="images/product.png"alt="Product" height="416" width="417">

到此:

<img id="productImage"  alt="Product" height="416" width="417">

您在那里使用了不正确的id:

$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);

您应该使用productImage,而不是message。使用此:

$("#iFrameThingy").contents().find("#productImage").attr("src","photos/cw/briantest/" +pic);