图片上传即时显示缩略图的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的监控数据是否发生改变
Apr 11 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 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数据缓存技术
2007/02/14 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
javascript连续赋值问题
2015/07/08 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
python基于socket实现网络广播的方法
2015/04/29 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
详解python while 函数及while和for的区别
2018/09/07 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
国际贸易专业个人求职信格式
2014/02/02 职场文书
好媳妇事迹材料
2014/12/24 职场文书
《叶问2》观后感
2015/06/15 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
Python中字符串对象语法分享
2022/02/24 Python
Win11查看设备管理器
2022/04/19 数码科技