用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隐藏参数post传值实例
Apr 18 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
详解JavaScript中return的用法
May 08 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
从新浪弄下来的全屏广告代码 与使用说明
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
Yii分页用法实例详解
2014/12/04 PHP
CI框架常用方法小结
2016/05/17 PHP
php实现图片压缩处理
2020/09/09 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python读取网页内容的方法
2015/07/30 Python
python机器学习之神经网络(三)
2017/12/20 Python
numpy返回array中元素的index方法
2018/06/27 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
市场部管理制度
2014/02/02 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
生日宴会祝酒词
2015/08/10 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
解析redis hash应用场景和常用命令
2021/08/04 Redis