图片上传即时显示缩略图的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实现文本框中焦点在最后位置
Mar 04 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
vue实现虚拟列表功能的代码
Jul 28 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验证码函数代码(简单实用)
2013/09/29 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python学生管理系统开发
2019/01/30 Python
Python创建字典的八种方式
2019/02/27 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
C语言面试题
2015/10/30 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
专科毕业生就业推荐信
2013/11/01 职场文书
工厂车间标语
2014/06/19 职场文书
2014年国庆节寄语
2014/09/19 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
信息技术研修心得体会
2016/01/08 职场文书
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL