图片上传即时显示缩略图的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背投广告代码的完善
Apr 08 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
python 截取 取出一部分的字符串方法
2017/03/01 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
应届生服装设计自我评价
2013/09/20 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
交通事故委托书范本
2014/09/28 职场文书
python pyhs2 的安装操作
2021/04/07 Python
一行代码python实现文件共享服务器
2021/04/22 Python
新手必备Python开发环境搭建教程
2021/05/28 Python