无刷新实时显示图片

ruanchao 2008-01-29 04:47:53
小弟近一个星期都在摆弄这样一个问题：

用户上传图片，要求无刷新的实时显示出来，目的快达到的时候出现了如下问题：checkbox的onclick事件在IE6/7下没有响应，在Firefox/Opera/Safari都可以响应。请遇到并解决过类似问题的同仁们帮忙看一下哈，怎样做才能让checkbox的onclick事件在IE6/7下触发呢？

Thanks in advance!

相关的JavaScript代码如下：
<script>
//......
var images = par.getElementById('images');
var number = images.childNodes.length;

var new_div = par.createElement('div');
var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_img.className = 'load';
new_div.appendChild(new_img);
images.appendChild(new_div);

var new_cbx = par.createElement('input');
new_cbx.type = "checkbox";
new_div.appendChild(new_cbx);
images.appendChild(new_div);

new_cbx.onclick = function(){
//例如让alert("Hello World")显示相应的信息
}
</script>
这是部分相关的代码，有兴趣请来看看哈！
...全文
234 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
nj_1st_excellence 2008-01-31
  • 打赏
  • 举报
 回复
大哥，我是做asp.net的，php的代碼我沒有環境調試，最好能看到全html的(就是程序運行到你想要的那個效果，但是沒有出來的是，通過查看源文件得到的html)

如果不方便，那我就幫你頂........
nj_1st_excellence 2008-01-30
  • 打赏
  • 举报
 回复
兄臺，你的問題是checkbox點擊的時候沒有onclick的效果吧。
但是我把你的代碼 copy出來是可以的。或許 是因為其他的元素影響的 ..因為看不到全部，所以....

不過有個地方感覺怪怪的：為什么 var par = window.parent.document;
如果可以的話，試試不要parent,直接 var par = window.document;

ruanchao 2008-01-30
  • 打赏
  • 举报
 回复
好像没有效果啊，我把代码都贴出来，你帮忙看看哈!
//index.php
<html>
<head>
<title> Asynchronous image file upload without AJAX </title>
<style>
body {
background: url('background.gif');
}
iframe {
border-width: 0px;
height: 60px;
width: 400px;
}
iframe.hidden {
visibility另外需要在uplimg文件夹的属性--> web 共享--> 共享: hidden;
width:0px;
height:0px;
}

#main {
overflow: hidden;
margin: auto;
width: 410px;
height: 450px;
border-style: solid;
border-width: 1px;
background-color: white;
}

#footer {
margin: auto;
width: 410px;
height: 20px;
border-style: solid;
border-width: 1px;
border-top-width: 0px;
background-color: white;
text-align: center;
font-family: verdana;
font-size: 80%;
}

#images {
width: 390px;
margin: 20px;
}

#images div {
margin: 10px;
width: 100px;
height: 100px;
border-style: solid;
border-width: 5px;
border-color: #DEDFDE;
float: left;
overflow: hidden;
}

#images div:hover {
border-color: #529EBD;
}

#images img.load {
margin: 36px;
}
</style>
</html>
<body> <center>
<div id="main">
<div id="iframe"> <iframe src="upload.php" frameborder="0"> </iframe> </div>
<div id="images"> </div>
</div>
</center> </body>
</html>

//upload.php
<?php
$ftmp = $_FILES['image']['tmp_name'];
$oname = $_FILES['image']['name'];
$fname = 'uplimg/'.$_FILES['image']['name'];

if(move_uploaded_file($ftmp, $fname)){
?>
<html> <head> <script>
var par = window.parent.document;
var images = par.getElementById('images');
var imgdiv = images.getElementsByTagName('div')[ <?=(int)$_POST['imgnum']?> ];
var image = imgdiv.getElementsByTagName('img')[0];

imgdiv.removeChild(image);
var image_new = par.createElement('img');

image_new.src = 'resize.php?pic= <?=$oname?> ';
image_new.className = 'loaded';
imgdiv.appendChild(image_new);
</script> </head>
</html>
<?php
//exit();
}
?> <html> <head>
<script language="javascript">
function upload(){
// hide old iframe
var par = window.parent.document;
var num = par.getElementsByTagName('iframe').length - 1;

var iframe = par.getElementsByTagName('iframe')[num];
iframe.className = 'hidden';

// create new iframe
var new_iframe = par.createElement('iframe');
new_iframe.src = 'upload.php';
new_iframe.frameBorder = '0';
par.getElementById('iframe').appendChild(new_iframe);
new_iframe.setAttribute("id","1");
alert(new_iframe.getAttribute("id"));
// add image progress
var images = par.getElementById('images');
var number = images.childNodes.length;
if(number> 3) par.getElementById('btn').disabled = true;

var new_div = par.createElement('div');
images.appendChild(new_div);

var new_cbx = par.createElement('input');
new_cbx.type = "checkbox";
new_div.appendChild(new_cbx);
//new_cbx.setAttribute("id","2");

var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_img.className = 'load';
new_div.appendChild(new_img);


alert(images.childNodes[0].childNodes[0]);

new_cbx.mouseout = function()
{ alert(images.childNodes[0].childNodes[0]);
for(var i=0;i <= number;i++)
{
if(images.childNodes[i].childNodes[0].checked)
{
images.removeChild(images.childNodes[i]);
//System.IO.File.Delete($fname);
number = number-1;
}
}
}

// send
var imgnum = images.getElementsByTagName('div').length - 1;
document.iform.imgnum.value = imgnum;
setTimeout(document.iform.submit(),5000);
}
</script>
<style>
#file {
width: 350px;
}
</style>
<head> <body> <center>
<form name="iform" action="" method="post" enctype="multipart/form-data">
<tr>
<td> <input id="file" type="file" name="image">
<input id="btn" type="button" value="create" onclick="upload()" />
<input type="hidden" name="imgnum"/>
<br>
</td>
</tr>
</form>
</center> </html>

//resize.php
<?php
if($_GET['pic']){
$img = new img('uplimg/'.$_GET['pic']);
$img-> resize();
$img-> show();
}

class img {

var $image = '';
var $temp = '';

function img($sourceFile){
if(file_exists($sourceFile)){
$image_info = getimagesize('uplimg/'.$_GET['pic']);
switch ($image_info['mime']) {
case 'image/gif':
$this-> image = ImageCreateFromGIF($sourceFile);
break;
case 'image/jpeg':
$this-> image = ImageCreateFromJPEG($sourceFile);
break;
case 'image/png':
$this-> image = ImageCreateFromPNG($sourceFile);
break;
}
} else {
$this-> errorHandler();
}
return;
}

function resize($width = 100, $height = 100, $aspectradio = true){
$o_wd = imagesx($this-> image);
$o_ht = imagesy($this-> image);
if(isset($aspectradio)&&$aspectradio) {
$w = round($o_wd * $height / $o_ht);
$h = round($o_ht * $width / $o_wd);
if(($height-$h) <($width-$w)){
$width =& $w;
} else {
$height =& $h;
}
}
$this-> temp = imageCreateTrueColor($width,$height);
imageCopyResampled($this-> temp, $this-> image,
0, 0, 0, 0, $width, $height, $o_wd, $o_ht);
$this-> sync();
return;
}

function sync(){
$this-> image =& $this-> temp;
unset($this-> temp);
$this-> temp = '';
return;
}

function show(){
$image_info = getimagesize('uplimg/'.$_GET['pic']);
$this-> _sendHeader();
switch ($image_info['mime']) {
case 'image/gif':
ImageGIF($this-> image);
case 'image/jpeg':
ImageJPEG($this-> image);
case 'image/png':
ImagePNG($this-> image);
}
return;
}

function _sendHeader(){
$image_info = getimagesize('uplimg/'.$_GET['pic']);
switch ($image_info['mime']) {
case 'image/gif':
header('Content-Type: image/gif');
break;
case 'image/jpeg':
header('Content-Type: image/jpeg');
break;
case 'image/png':
header('Content-Type: image/png');
break;
}
}

function errorHandler(){
echo "error";
exit();
}

function watermark($pngImage, $left = 0, $top = 0){
ImageAlphaBlending($this-> image, true);
$layer = ImageCreateFromPNG($pngImage);
$logoW = ImageSX($layer);
$logoH = ImageSY($layer);
ImageCopy($this-> image, $layer, $left, $top, 0, 0, $logoW, $logoH);
}
}
?>

//除了以上三个文件，你还需要在与这三个文件同目录下建立一个umlimg文件夹用于存放上传的图片。。。

多多麻烦你了哈
ruanchao 2008-01-30
  • 打赏
  • 举报
 回复
好像没有效果啊，我把代码都贴出来，你帮忙看看哈!
//index.php
<html>
<head>
<title>Asynchronous image file upload without AJAX</title>
<style>
body {
background: url('background.gif');
}
iframe {
border-width: 0px;
height: 60px;
width: 400px;
}
iframe.hidden {
visibility另外需要在uplimg文件夹的属性-->web 共享-->共享: hidden;
width:0px;
height:0px;
}

#main {
overflow: hidden;
margin: auto;
width: 410px;
height: 450px;
border-style: solid;
border-width: 1px;
background-color: white;
}

#footer {
margin: auto;
width: 410px;
height: 20px;
border-style: solid;
border-width: 1px;
border-top-width: 0px;
background-color: white;
text-align: center;
font-family: verdana;
font-size: 80%;
}

#images {
width: 390px;
margin: 20px;
}

#images div {
margin: 10px;
width: 100px;
height: 100px;
border-style: solid;
border-width: 5px;
border-color: #DEDFDE;
float: left;
overflow: hidden;
}

#images div:hover {
border-color: #529EBD;
}

#images img.load {
margin: 36px;
}
</style>
</html>
<body><center>
<div id="main">
<div id="iframe"><iframe src="upload.php" frameborder="0"></iframe></div>
<div id="images"></div>
</div>
</center></body>
</html>

//upload.php
<?php
$ftmp = $_FILES['image']['tmp_name'];
$oname = $_FILES['image']['name'];
$fname = 'uplimg/'.$_FILES['image']['name'];

if(move_uploaded_file($ftmp, $fname)){
?>
<html><head><script>
var par = window.parent.document;
var images = par.getElementById('images');
var imgdiv = images.getElementsByTagName('div')[<?=(int)$_POST['imgnum']?>];
var image = imgdiv.getElementsByTagName('img')[0];

imgdiv.removeChild(image);
var image_new = par.createElement('img');

image_new.src = 'resize.php?pic=<?=$oname?>';
image_new.className = 'loaded';
imgdiv.appendChild(image_new);
</script></head>
</html>
<?php
//exit();
}
?><html><head>
<script language="javascript">
function upload(){
// hide old iframe
var par = window.parent.document;
var num = par.getElementsByTagName('iframe').length - 1;

var iframe = par.getElementsByTagName('iframe')[num];
iframe.className = 'hidden';

// create new iframe
var new_iframe = par.createElement('iframe');
new_iframe.src = 'upload.php';
new_iframe.frameBorder = '0';
par.getElementById('iframe').appendChild(new_iframe);
new_iframe.setAttribute("id","1");
alert(new_iframe.getAttribute("id"));
// add image progress
var images = par.getElementById('images');
var number = images.childNodes.length;
if(number>3) par.getElementById('btn').disabled = true;

var new_div = par.createElement('div');
images.appendChild(new_div);

var new_cbx = par.createElement('input');
new_cbx.type = "checkbox";
new_div.appendChild(new_cbx);
//new_cbx.setAttribute("id","2");

var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_img.className = 'load';
new_div.appendChild(new_img);


alert(images.childNodes[0].childNodes[0]);

new_cbx.mouseout = function()
{ alert(images.childNodes[0].childNodes[0]);
for(var i=0;i<= number;i++)
{
if(images.childNodes[i].childNodes[0].checked)
{
images.removeChild(images.childNodes[i]);
//System.IO.File.Delete($fname);
number = number-1;
}
}
}

// send
var imgnum = images.getElementsByTagName('div').length - 1;
document.iform.imgnum.value = imgnum;
setTimeout(document.iform.submit(),5000);
}
</script>
<style>
#file {
width: 350px;
}
</style>
<head><body><center>
<form name="iform" action="" method="post" enctype="multipart/form-data">
<tr>
<td><input id="file" type="file" name="image">
<input id="btn" type="button" value="create" onclick="upload()" />
<input type="hidden" name="imgnum"/>
<br>
</td>
</tr>
</form>
</center></html>

//resize.php
<?php
if($_GET['pic']){
$img = new img('uplimg/'.$_GET['pic']);
$img->resize();
$img->show();
}

class img {

var $image = '';
var $temp = '';

function img($sourceFile){
if(file_exists($sourceFile)){
$image_info = getimagesize('uplimg/'.$_GET['pic']);
switch ($image_info['mime']) {
case 'image/gif':
$this->image = ImageCreateFromGIF($sourceFile);
break;
case 'image/jpeg':
$this->image = ImageCreateFromJPEG($sourceFile);
break;
case 'image/png':
$this->image = ImageCreateFromPNG($sourceFile);
break;
}
} else {
$this->errorHandler();
}
return;
}

function resize($width = 100, $height = 100, $aspectradio = true){
$o_wd = imagesx($this->image);
$o_ht = imagesy($this->image);
if(isset($aspectradio)&&$aspectradio) {
$w = round($o_wd * $height / $o_ht);
$h = round($o_ht * $width / $o_wd);
if(($height-$h)<($width-$w)){
$width =& $w;
} else {
$height =& $h;
}
}
$this->temp = imageCreateTrueColor($width,$height);
imageCopyResampled($this->temp, $this->image,
0, 0, 0, 0, $width, $height, $o_wd, $o_ht);
$this->sync();
return;
}

function sync(){
$this->image =& $this->temp;
unset($this->temp);
$this->temp = '';
return;
}

function show(){
$image_info = getimagesize('uplimg/'.$_GET['pic']);
$this->_sendHeader();
switch ($image_info['mime']) {
case 'image/gif':
ImageGIF($this->image);
case 'image/jpeg':
ImageJPEG($this->image);
case 'image/png':
ImagePNG($this->image);
}
return;
}

function _sendHeader(){
$image_info = getimagesize('uplimg/'.$_GET['pic']);
switch ($image_info['mime']) {
case 'image/gif':
header('Content-Type: image/gif');
break;
case 'image/jpeg':
header('Content-Type: image/jpeg');
break;
case 'image/png':
header('Content-Type: image/png');
break;
}
}

function errorHandler(){
echo "error";
exit();
}

function watermark($pngImage, $left = 0, $top = 0){
ImageAlphaBlending($this->image, true);
$layer = ImageCreateFromPNG($pngImage);
$logoW = ImageSX($layer);
$logoH = ImageSY($layer);
ImageCopy($this->image, $layer, $left, $top, 0, 0, $logoW, $logoH);
}
}
?>

//除了以上三个文件，你还需要在与这三个文件同目录下建立一个umlimg文件夹用于存放上传的图片。。。

多多麻烦你了哈
ruanchao 2008-01-29
  • 打赏
  • 举报
 回复
多谢两位的帮助！

"南京一等一科技" 仁兄：

你的代码我测试过了，的确在我用的四种浏览器中都通过了。遗憾的是，没有解决我的问题。下面是我全部的代码，请看一下，谢谢！
--------------js--------------------------
// hide old iframe
var par = window.parent.document;
var num = par.getElementsByTagName('iframe').length - 1;

var iframe = par.getElementsByTagName('iframe')[num];
iframe.className = 'hidden';
// create new iframe
var new_iframe = par.createElement('iframe');
new_iframe.src = 'upload.php';
new_iframe.frameBorder = '0';
par.getElementById('iframe').appendChild(new_iframe);

// add image progress
var images = par.getElementById('images');

var new_div = par.createElement('div');
images.appendChild(new_div);

var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_img.className = 'load';
new_div.appendChild(new_img);

var new_cbx = par.createElement('input');
new_cbx.type = "checkbox";
new_div.appendChild(new_cbx);

new_cbx.onclick = function(){
alert("Hello World");
}
--------------------html---------------
<div id="main">
<div id="iframe"><iframe src="upload.php" frameborder="0"></iframe></div>
<div id="images"></div>
</div>
谢谢！


nj_1st_excellence 2008-01-29
  • 打赏
  • 举报
 回复
------------備注------
小弟在 ie6 和 firefox下 測試正常
-------js-----
<script type="text/javascript">
<!--
function createImage()
{
var parrentDiv = document.getElementById("parrentDiv");
var new_div = document.createElement('div');
parrentDiv.appendChild(new_div);

var new_img = document.createElement('img');
new_img.src = 'indicator.gif';
new_img.className = 'load';
new_div.appendChild(new_img);

var new_cbx = document.createElement('input');
new_cbx.type = "checkbox";
new_div.appendChild(new_cbx);

new_cbx.onclick = function()
{
alert("Hello World")
};
}
//-->
</script>
-----------html-----------------------
<input type="button" value="create" onclick="createImage()" />
<div id="parrentDiv">
</div>

xiaojing7 2008-01-29
  • 打赏
  • 举报
 回复 


<script>

var showPid = function(whichpic){

	var source=whichpic.getAttribute("href");

	var placeholder=document.getElementById("placeholder");

	placeholder.setAttribute("src",source);

};

</script>

<a href="1.gif"  onclick="return showPid(this);">a</a>

<img id="placeholder" src="" />
PowerBI系列之Gateway网关和数据刷新
本课程是PowerBI系列课程之Gateway网关和数据刷新专题 1.  Gateway网关的介绍和下载安装 2.  Gateway网关集群介绍 3.  配置本地文件数据源和定时刷新 4.  配置Sql Server数据源和定时刷新 5.&...
无刷新上传图片的几种方式
用户体验相对于提交表单跳转显示图片的方式总还是要好一些的。 本文主要介绍三种无刷新上传图片的方式   1.使用iframe子页面的形式达到无刷新上传图片的功能。首先设置一个隐藏的iframe元素并设置其name属性为...
网页静态图片资源显示不出来 需要刷新才能显示
如果路径错误，浏览器会返回 404 错误，无法显示图片。可以在浏览器的开发者工具中查看网络请求的状态，检查资源是否被正确加载。缓存问题：浏览器会将静态资源缓存到本地，以便下次访问时更快地加载。如果浏览器...
Qt之OpenGL实时显示图像
工作中在用Qt写界面程序时需要完成一项功能：客户端和...OpenGL显示图片使用GPU渲染，如果程序需要做到毫秒级的刷新频率，用该方法可以很大程度上缓解CPU的压力，图片的动态显示也更流畅。 下面我用一个demo程...
PYQT5-实时更新图片显示
TMD 被坑死了，只是想做一个...只有在主线程中加入这个方法，才能在处理任务的时候实时更新图片的显示，否则UI界面就处于卡顿状态。 这个方法基本上可以理解为在处理当前人物的同时，同时处理更新UI界面的事件。 ...
Ajax

52,797

社区成员

25,305

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章