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中的constructor和prototype
Apr 07 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 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
JAVA/JSP学习系列之七
2006/10/09 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php全排列递归算法代码
2012/10/09 PHP
初识php MVC
2014/09/10 PHP
PHP实现简易blog的制作
2016/10/24 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
基于python实现百度翻译功能
2019/05/09 Python
Pyqt5自适应布局实例
2019/12/13 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
Python 创建TCP服务器的方法
2020/07/28 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
会计毕业生自荐信
2013/11/21 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
大学生新学期计划书
2014/04/28 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
庆七一活动简报
2015/07/20 职场文书
三十年同学聚会感言
2015/07/30 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python