用js实现预览待上传的本地图片
更新时间：2007年03月15日 00:00:00 作者：
<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>
<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>
相关文章
本篇文章主要给大家讲述了JavaScript体验异步更好的解决办法，有这方面需要的朋友跟着学习参考下吧。2018-01-01
这篇文章主要介绍了如何使用JavaScript创建实时数据可视化图表,我们将使用流行的图表库,如Chart.js,来展示如何将实时数据动态呈现在图表中,感兴趣的可以了解下2024-01-01
JS也玩OO继承...2007-01-01
关于Getter与Setter大家一定不会陌生,下面简单介绍几种我所知道的在JavaScript中实现G/S的方法.2010-12-12
这篇文章主要为大家详细介绍了微信小程序使用swiper组件实现层叠轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
小程序能够在不同的页面进行跳转切换,路由起到了至关重要的作用,下面这篇文章主要给大家介绍了关于微信小程序如何在页面跳转时进行页面导航的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了JS如何获取指定范围内的随机数含小数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
JS获取URL中参数值（QueryString）的4种方法分享
今天碰到要在一个页面获取另外一个页面url传过来的参数，一开始很本能的想到了用 split("?")这样一步步的分解出需要的参数。后来想了一下，肯定会有更加简单的方法的！所以在网上找到了几个很又简单实用的方法，mark下。2014-04-04
在Web开发中文件下载功能是一个非常常见的功能,这篇文章主要给大家介绍了关于javascript下载文件5种方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了js简单实现图片延迟加载的方法,涉及javascript针对页面元素的遍历与动态设置技巧,需要的朋友可以参考下2016-07-07
最新评论