即时显示缩略图

来源：互联网发布：java参数&传递编辑：程序博客网时间：2024/04/19 14:28

上传图片立即显示图片缩略图，支持火狐和IE

chrome暂时不支持

演示接口：http://www.laruence.com/wp-content/uploads/previewDemo.html

<html><head><meta content="text/html; charset=utf-8" http-equiv=content-type><meta name=author content="Laruence(www.laruence.com)"><title>即时显示缩略图</title></head><body>   <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><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></body></html>