js上传图片及预览功能实例分析


Posted in Javascript onApril 24, 2015

本文实例讲述了js上传图片及预览功能。分享给大家供大家参考。具体分析如下:

参考了网上一些人代码写了一个上传图片及时预览的功能

<img id="imgTag" style="height: 100px;" alt="" />
<input type="file" />

function DisplayImage(fileTag,imgTagId){
var allowExtention=".jpg.png.gif";
var extentionArr=fileTag.value.split('.');
var extention = extentionArr[extentionArr.length-1];
if(!(allowExtention.indexOf(extention)>-1)){
alert("Please upload image!");
}else{
//for adveced broswer(the newest ie,chrome,ff)
if(typeof(FileReader)!=="undefined"){
var reader = new FileReader();
reader.readAsDataURL(fileTag.files[0]);
reader.onload = function(e){
document.getElementById(imgTagId).setAttribute("src", e.target.result);
}
}else{
//for(ie6)
document.getElementById(imgTagId).setAttribute("src",fileTag.value);
}
}
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
浅谈jquery事件处理
Apr 24 #Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 #Javascript
JS实现简单的键盘打字的效果
Apr 24 #Javascript
javascript中replace( )方法的使用
Apr 24 #Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 #Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 #Javascript
原生js制作简单的数字键盘
Apr 24 #Javascript
You might like
PHP5 字符串处理函数大全
2010/03/23 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
js实现磁性吸附的示例
2020/10/26 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python选课系统开发程序
2016/09/02 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
初中女生自我鉴定
2013/12/19 职场文书
实习生求职自荐信
2014/02/07 职场文书
师德演讲稿范文
2014/05/06 职场文书
项目工作说明书
2014/07/29 职场文书
2014年组织部工作总结
2014/11/14 职场文书
三好学生竞选稿
2015/11/21 职场文书