图片上传即时显示缩略图的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 ui插件的使用方法代码实例
May 08 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
可插入图片的TEXT文本框
2013/12/27 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
github配置使用指南
2014/11/18 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
Django框架自定义session处理操作示例
2019/05/27 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python交互模式基础知识点学习
2020/06/18 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
社区交通安全实施方案
2014/03/22 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
环保倡议书范文
2014/05/12 职场文书
企业形象策划方案
2014/05/29 职场文书
运动会拉拉队口号
2014/06/09 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers