用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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 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
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
jQuery总体架构的理解分析
2011/03/07 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
js同源策略详解
2015/05/21 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Django 路由系统URLconf的使用
2018/10/11 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
办公室文书岗位职责
2013/12/16 职场文书
大专生自我评价
2014/01/28 职场文书
九年级物理教学反思
2014/01/29 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
书香校园建设方案
2014/05/02 职场文书
2014年维稳工作总结
2014/11/18 职场文书
幼师辞职信范文
2015/02/27 职场文书
养成教育工作总结
2015/08/13 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python