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 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
ajax实现无刷新分页(php)
2010/07/18 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP单链表的实现代码
2016/07/05 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
js数组操作常用方法
2014/05/08 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
AJAX实现省市县三级联动效果
2021/10/16 Javascript