图片上传即时显示缩略图的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 相关文章推荐
JQuery验证工具类搜集整理
Jan 16 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
js控制div弹出层实现方法
May 11 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
使用JS动态显示文本
Sep 09 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 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+MSSQL分页的例子
2006/10/09 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php中this关键字用法分析
2016/12/07 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
Python制作exe文件简单流程
2019/01/24 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
在django view中给form传入参数的例子
2019/07/19 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python实现UDP协议下的文件传输
2020/03/20 Python
公司活动邀请函
2014/01/24 职场文书
《太阳》教学反思
2014/02/21 职场文书
1亿有多大教学反思
2014/05/01 职场文书
煤矿安全承诺书
2014/05/22 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书