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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 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
PHP类中Static方法效率测试代码
2010/10/17 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python返回数组/List长度的实例
2018/06/23 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Django框架请求生命周期实现原理
2020/11/13 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
幼师自荐信
2013/10/26 职场文书
房地产开盘策划方案
2014/02/10 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
校本研修个人总结
2015/02/28 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
工作表现证明
2015/06/15 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
详解Vue的options
2021/05/15 Vue.js
python blinker 信号库
2022/05/04 Python