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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
Vue watch响应数据实现方法解析
Jul 10 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP内核探索之变量
2015/12/22 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
python通过索引遍历列表的方法
2015/05/04 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python 列表的清空方式
2020/01/13 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
新浪网技术部笔试题
2016/08/26 面试题
保卫钓鱼岛口号
2014/06/20 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
清明扫墓感想
2015/08/11 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
世界十大狙击步枪排行榜
2022/03/20 杂记