图片上传即时显示缩略图的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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 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
php 函数中使用static的说明
2012/06/01 PHP
yii数据库的查询方法
2015/12/28 PHP
twig里使用js变量的方法
2016/02/05 PHP
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python断言assert的用法代码解析
2018/02/03 Python
使用matplotlib画散点图的方法
2018/05/25 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
python同时遍历两个list用法说明
2020/05/02 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
一个精品风格的世界:Atterley
2019/05/01 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
教导处工作制度
2014/01/18 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
国庆促销活动总结
2014/08/29 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python