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 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
jQuery返回定位插件详解
May 15 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
记React connect的几种写法(小结)
Sep 18 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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调用三种数据库的方法(2)
2006/10/09 PHP
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
YII框架关联查询操作示例
2019/04/29 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Django 多环境配置详解
2019/05/14 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
如何判断计算机可能已经中马
2013/03/22 面试题
个人委托书
2014/07/31 职场文书
公司庆典欢迎词
2015/01/26 职场文书
教代会闭幕词
2015/01/28 职场文书
2017春节晚会开幕词
2016/03/03 职场文书