图片上传即时显示缩略图的js代码


Posted in Javascript onMay 27, 2009
<script language="javascript" type="text/javascript">
 var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
 var preivew = function(file, container){
  try{
  var pic = new Picture(file, container);
  }catch(e){
  alert(e);
  }
 }
 //缩略图类定义
   var Picture = function(file, container){
  var height = 0, 
  widht = 0, 
  ext = '',
  size = 0,
  name  = '',
  path  = '';
  var self = this;
  if(file){ 
    name = file.value;
  if (window.navigator.userAgent.indexOf("MSIE")>=1){ 
   file.select(); 
   path = document.selection.createRange().text; 
  }else if(window.navigator.userAgent.indexOf("Firefox")>=1){ 
   if(file.files){ 
   path = file.files.item(0).getAsDataURL(); 
   }else{
   path = file.value;
   }
  } 
  }else{
  throw "bad file";
  } 
  ext = name.substr(name.lastIndexOf("."), name.length);
  if(container.tagName.toLowerCase() != 'img'){
  throw "container is not a valid img label";
  container.visibility = 'hidden';
  }
  container.src = path;
  container.alt = name;
  container.style.visibility = 'visible';
  height = container.height;
  widht = container.widht;
  size  = container.fileSize;

  this.get = function(name){
  return self[name];
  }
  this.isValid = function(){
  if(allowExt.indexOf(self.ext) !== -1){
   throw 'the ext is not allowed to upload';
   return false;
  }
  }
 }
</script>
  <div class='previewDemo'>
 <input id="file" type="file" onchange="preivew(this, document.getElementById('img'));">
 <img id="img" style="visibility:hidden" height="100px" width="100px">
</div>
Javascript 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
JavaScript 闭包深入理解(closure)
May 27 #Javascript
jQuery 剧场版 你必须知道的javascript
May 27 #Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 #Javascript
jquery cookie插件代码类
May 26 #Javascript
判断脚本加载是否完成的方法
May 26 #Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 #Javascript
Javascript Select操作大集合
May 26 #Javascript
You might like
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
jQuery 技巧小结
2010/04/02 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
python的debug实用工具 pdb详解
2019/07/12 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
教师党员公开承诺书
2014/03/25 职场文书
老干部工作先进事迹
2014/08/17 职场文书
食品安全汇报材料
2014/08/18 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL