图片上传即时显示缩略图的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 相关文章推荐
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
Javascript实现信息滚动效果
May 18 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
在JS循环中使用async/await的方法
Oct 12 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python实现简单的四则运算计算器
2016/11/02 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
python pandas模块基础学习详解
2019/07/03 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
成考报名单位证明范本
2014/01/16 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
公司应聘自荐书
2014/06/14 职场文书
财务人员个人工作总结
2015/02/27 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
Python List remove()实例用法详解
2021/08/02 Python
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
Android studio 简单计算器的编写
2022/05/20 Java/Android