用js实现预览待上传的本地图片


Posted in Javascript onMarch 15, 2007

<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> 

Javascript 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
Three.js基础部分学习
Jan 08 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
jQuery实现高级检索功能
May 28 jQuery
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 #Javascript
Z-Blog中用到的js代码
Mar 15 #Javascript
htm调用JS代码
Mar 15 #Javascript
QQ邮箱的一个文本编辑器代码
Mar 14 #Javascript
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 #Javascript
js实现的网站首页随机公告随机公告
Mar 14 #Javascript
newxtree.js代码
Mar 13 #Javascript
You might like
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
js实现批量删除功能
2020/08/27 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python+django加载静态网页模板解析
2017/12/12 Python
python 编码规范整理
2018/05/05 Python
python实现多人聊天室
2020/03/31 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
django中media媒体路径设置的步骤
2019/11/15 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
领导干部廉政自律承诺书
2014/05/26 职场文书
毕业大学生自荐信
2014/06/17 职场文书
遗嘱范文
2015/08/07 职场文书
Oracle笔记
2021/04/05 Oracle
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
Oracle使用别名的好处
2022/04/19 Oracle