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保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
浅析Vue 生命周期
Jun 21 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 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的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
php如何获取文件的扩展名
2015/10/28 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Python算法应用实战之队列详解
2017/02/04 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
python中 * 的用法详解
2019/07/10 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
土木工程毕业生推荐信
2013/10/28 职场文书
制冷与电控专业应届生求职信
2013/11/11 职场文书
求职信需要的五点内容
2014/02/01 职场文书
工作时间上网检讨书
2014/02/03 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle