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 事件查询综合
Jul 13 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
vue.js实现简单购物车功能
May 30 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.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
在Python中使用模块的教程
2015/04/27 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
护士求职自荐信范文
2014/03/19 职场文书
导游个人求职信
2014/04/25 职场文书
图书馆标语
2014/06/19 职场文书
爱护公物标语
2014/06/24 职场文书
2014年工程工作总结
2014/11/25 职场文书
学雷锋日活动总结
2015/02/06 职场文书
先进教师个人总结
2015/02/11 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
优秀创业计划书分享
2019/07/19 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers