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 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
vue前端工程的搭建
Mar 31 Vue.js
浅谈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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
VuePress 快速踩坑小结
2019/02/14 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
python中文编码问题小结
2014/09/28 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python3标准库总结
2019/02/19 Python
python实现猜拳游戏
2020/03/04 Python
Django框架请求生命周期实现原理
2020/11/13 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
软件测试题目
2013/02/27 面试题
工业学校毕业生自荐信范文
2014/01/03 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
感恩的心主题班会
2015/08/12 职场文书
入党心得体会
2019/06/20 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Python进程池与进程锁之语法学习
2022/04/11 Python