图片上传即时显示缩略图的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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 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
如何删除多级目录
2006/10/09 PHP
PHP 高级课程笔记 面向对象
2009/06/21 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
详解Python多线程
2016/11/14 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python deque模块简单使用代码实例
2020/03/12 Python
python实现学生成绩测评系统
2020/06/22 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
毕业生个人求职的自我评价
2013/10/28 职场文书
老公爱的承诺书
2014/03/31 职场文书
人事代理委托书
2014/09/27 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Python中的pprint模块
2021/11/27 Python
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫