用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日历功能对象
Jan 12 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
使用js画图之画切线
Jan 12 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
Vue插件之滑动验证码用法详解
Apr 05 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
php之可变变量的实例详解
2017/09/12 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python实现大文件排序的方法
2015/07/10 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
车贷收入证明范本
2014/01/09 职场文书
对教师的评语
2014/04/28 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
领导班子整改方案
2014/10/25 职场文书
2014年工程师工作总结
2014/11/25 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
Python合并pdf文件的工具
2021/07/01 Python