html+javascript实现带有预览功能的上传表单的问题(望高手们给指教)
2010-06-16 03:25
645 查看
以下代码是html+JavaScript实现的带有图片预览功能的上传表单
1、
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带有图片预览功能的上传表单</title>
<script>
function viewmypic(imgfile) {
if (imgfile.value){
document.getElementById("showimg").outerHTML='<img name="showimg" id="showimg" src="'+imgfile.value+ '" style="display:block;border:1;" alt="图片预览" /> '
}
}
</script>
</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" onChange="viewmypic(this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />
<br />
</center>
</body>
</html>
2.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带有图片预览功能的上传表单</title>
<script>
function viewmypic(mypic,imgfile) {
if (imgfile.value){
mypic.src=imgfile.value;
mypic.style.display="";
mypic.border=1;
}
}
</script>
</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" onChange="viewmypic(showimg,this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />
<br />
</center>
</body>
</html>
代码块1在ie 8.0中可实现,但是在Firefox 3.6.3 火狐中国版和Opera 10.53中不可实现
代码块2在ie 8.0和Firefox3.6.3中国版中都可实现,但是在Operating 10.53中不能实现
望高手给出详解,并给出在Opera中的实现方法
1、
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带有图片预览功能的上传表单</title>
<script>
function viewmypic(imgfile) {
if (imgfile.value){
document.getElementById("showimg").outerHTML='<img name="showimg" id="showimg" src="'+imgfile.value+ '" style="display:block;border:1;" alt="图片预览" /> '
}
}
</script>
</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" onChange="viewmypic(this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />
<br />
</center>
</body>
</html>
2.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带有图片预览功能的上传表单</title>
<script>
function viewmypic(mypic,imgfile) {
if (imgfile.value){
mypic.src=imgfile.value;
mypic.style.display="";
mypic.border=1;
}
}
</script>
</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" onChange="viewmypic(showimg,this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />
<br />
</center>
</body>
</html>
代码块1在ie 8.0中可实现,但是在Firefox 3.6.3 火狐中国版和Opera 10.53中不可实现
代码块2在ie 8.0和Firefox3.6.3中国版中都可实现,但是在Operating 10.53中不能实现
望高手给出详解,并给出在Opera中的实现方法
相关文章推荐
- 带有图片预览功能的上传表单的完整HTML
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
- JavaScript实现图片上传预览功能
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
- JavaScript代码实现txt文件的上传预览功能
- [置顶] 在HTML表单中利用JavaScript实现图片上传的前端校验
- hibernate加ajax异步实现数据库中的新闻类别字段的获取,并且表单还是带有图片上传功能的
- JavaScript实现图片本地预览功能【不用上传至服务器】
- 带有图片预览功能的上传表单
- 带有图片预览功能的上传表单 上传预览
- 怎么简便地去掉html中难看的文件上传按钮并实现图片预览功能?
- 在tp3.2.3中使用 FormData 对象实现表单的文件上传功能遇到的一个问题及解决方法
- 带有图片预览功能的上传表单
- 上传图片预览功能的IE浏览器兼容性问题的实现:JS+JQuery+CSS完整版
- html表单结合php实现上传文件功能并且监控文件上传的进度
- 解决C:\fakepath路径加密问题,图片上传之前的预览功能的实现,html5 实现图片预览功能
- html使用iframe实现伪异步表单,实现无刷新上传文件时遇到的问题
- JavaScript实现无刷新上传预览图片功能
- JavaScript中的FileReader图片预览上传功能实现代码
- HTML自定义按钮上传图片并实现预览(同时解决getAsDataURL()弃用问题)