用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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
从新浪弄下来的全屏广告代码 与使用说明
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
curl和libcurl的区别简介
2015/07/01 PHP
实例讲解php数据访问
2016/05/09 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
简单实现js浮动框
2016/12/13 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
如何写你的创业计划书
2014/01/07 职场文书
员工工作表扬信范文
2014/01/13 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
大学生暑假实习总结
2015/07/13 职场文书
小学语文教学随笔
2015/08/14 职场文书
python如何进行基准测试
2021/04/26 Python