图片上传即时显示缩略图的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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
详解Vue的ref特性的使用
Jan 24 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利用单例模式实现日志处理类库
2014/02/10 PHP
prototype 的说明 js类
2006/09/07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
python zip文件 压缩
2008/12/24 Python
python检测lvs real server状态
2014/01/22 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Python程序暂停的正常处理方法
2019/11/07 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
志愿者活动总结
2014/04/28 职场文书
英语分层教学实施方案
2014/06/15 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
行政经理岗位职责
2015/04/15 职场文书
建党伟业电影观后感
2015/06/01 职场文书
2015入党自传书范文
2015/06/26 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书