当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 图片上传即时显示缩略图的js代码

Javascript
javascript 响应键盘特定按键(只响应数字键)
javascript indexOf方法、lastIndexOf 方法和substring 方法
javascript parseInt 函数分析(转)
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
JavaScript 面向对象入门精简篇
JS中==与===操作符的比较
JavaScript indexOf忽略大小写
dwr spring的集成实现代码
DWR Ext 加载数据
JavaScript 计算当天是本年本月的第几周
Js 获取当前日期时间及其它操作实现代码
javascript multibox 全选
JS array 数组详解
javascript 对象定义方法 简单易学
javascript 补零 函数集合
div scroll始终在最底部的实现代码
javascript eval()用法
javascript 打印页面代码
JAVASCRIPT THIS详解 面向对象
javascript 页面跳转方法集合

No. « 129 130 131 132 »

技术文章搜索

关键字

Javascript 中的 图片上传即时显示缩略图的js代码

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 347 ::
收藏到网摘: n/a

主要用于上传图片的过程中可以显示图片，这样就可以确认图片有没有远错，利用提高正确率。 
<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>