教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 js预览待上传本地图片

js预览待上传本地图片

发布时间:2015-05-15   编辑:jiaochengji.com
分享一例js预览本地图片的代码,实现本地预览功能,有需要的朋友参考下。

例子,js实现图片本地预览功能。
 

复制代码 代码示例:
<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" onchange="preview5()"/>
</form>
<script type="text/javascript">
function preview5(){
var x = document.getElementById("file5");
 if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){ 
var y = document.getElementById("img5");
if(y){
y.src = "file://localhost/" + x.value;
}else{
var img=document.createElement("img");
img.setAttribute("src","file://localhost/"+x.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id","img5");
document.getElementById("form5").appendChild(img);
 }
}else{
alert("本地预览图片有问题哦!");
}}
</script> 

您可能感兴趣的文章:
js预览待上传本地图片
JS预览图像 本地预览图片实现代码
利用JS HTML5实现图片上传预览效果(实例)
通过JS获取本地图片路径并显示出来的代码
JS实现图片预加载而无需等待的方法
图片上传前预览的js代码(兼容IE和FF)
JS实现图片上传时的本地预览,兼容IE和firefox
IE 中上传图片js预览本地图片无效的解决方法
js image对象预加载图片的方法详解
jquery实现兼容浏览器的图片上传本地预览功能

关键词: 本地预览   
[关闭]
~ ~