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 window.opener的用法分析
Apr 07 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 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 删除数组元素
2009/01/16 PHP
php xml实例 留言本
2009/03/20 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
小谈php正则提取图片地址
2014/03/27 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
windows下python安装pip图文教程
2018/05/25 Python
Python代码太长换行的实现
2019/07/05 Python
python tornado使用流生成图片的例子
2019/11/18 Python
关于python 跨域处理方式详解
2020/03/28 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
信息管理专业学生自荐信格式
2013/09/22 职场文书
《我的信念》教学反思
2014/02/15 职场文书
现场施工员岗位职责
2014/03/10 职场文书
运动会方队口号
2014/06/07 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
中队活动总结
2014/08/27 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
辅导员学期工作总结
2015/08/14 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
python爬虫selenium模块详解
2021/03/30 Python
JavaScript实现复选框全选功能
2021/04/11 Javascript
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android