当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 图片上传即时显示缩略图的js代码

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

2019年07月30日  | 移动技术网IT编程  | 我要评论

龙族5王者的选择,tieku,巴比豆

<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>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网