Question

我的主页面上有一个提交到php表单的上传按钮，然后将图像返回到主页面。我现在要做的是将图像元素加载到父页面中的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>

我有一点工作，但错误地改变了一些东西，现在它没有用，但我知道我很接近。任何帮助都是适当的

upload.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" />

上传消息将在此处。

Answer 1

更改此行：

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">

Answer 2

您在那里使用了错误的ID：

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

您应该使用 productImage 而不是消息。使用此：

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

将图像从父框架加载到子框架

2 个答案: