图片上传即时显示缩略图的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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
AngularJS入门之动画
Jul 27 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
繁简字转换功能
2006/07/19 Javascript
js中this用法实例详解
2015/05/05 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
python实现手机通讯录搜索功能
2018/02/22 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
python 实现线程之间的通信示例
2020/02/14 Python
详解python中的异常和文件读写
2021/01/03 Python
python中的插入排序的简单用法
2021/01/19 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
暑期社会实践学生的自我评价
2014/01/09 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL