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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
javascript白色简洁计算器
May 04 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
一篇不错的PHP基础学习笔记
2007/03/18 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
详解php命令注入攻击
2019/04/06 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python的re模块使用方法详解
2019/07/26 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
公司同意接收函
2014/01/13 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书