图片上传即时显示缩略图的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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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获取文件名后缀常用方法小结
2015/02/24 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
Vue计算属性的使用
2017/08/04 Javascript
解读ES6中class关键字
2017/11/20 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
业务部经理岗位职责
2014/01/04 职场文书
股权转让意向书
2014/04/01 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
员工表扬信怎么写
2015/05/05 职场文书
困难补助申请报告
2015/05/19 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书