正在将图像从父帧加载到子帧
Loading image from parent frame to child
我的主页上有一个上传按钮,它提交到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);
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像