Home  >  Article  >  Web Front-end  >  js code to instantly display thumbnails after image upload_Image special effects

js code to instantly display thumbnails after image upload_Image special effects

WBOY
WBOYOriginal
2016-05-16 18:52:21979browse
<<SPAN class=start-tag>script</SPAN><SPAN class=attribute-name> language</SPAN>=<SPAN class=attribute-value>"javascript" </SPAN><SPAN class=attribute-name>type</SPAN>=<SPAN class=attribute-value>"text/javascript"</SPAN>><br> var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];<br> var preivew = function(file, container){<br>  try{<br>  var pic = new Picture(file, container);<br>  }catch(e){<br>  alert(e);<br>  }<br> }<br> //缩略图类定义<br>   var Picture = function(file, container){<br>  var height = 0, <br>  widht = 0, <br>  ext = '',<br>  size = 0,<br>  name  = '',<br>  path  = '';<br>  var self = this;<br>  if(file){ <br>    name = file.value;<br>  if (window.navigator.userAgent.indexOf("MSIE")>=1){ <br>   file.select(); <br>   path = document.selection.createRange().text; <br>  }else if(window.navigator.userAgent.indexOf("Firefox")>=1){ <br>   if(file.files){ <br>   path = file.files.item(0).getAsDataURL(); <br>   }else{<br>   path = file.value;<br>   }<br>  } <br>  }else{<br>  throw "bad file";<br>  } <br><br><br>  ext = name.substr(name.lastIndexOf("."), name.length);<br><br>  if(container.tagName.toLowerCase() != 'img'){<br>  throw "container is not a valid img label";<br>  container.visibility = 'hidden';<br>  }<br>  container.src = path;<br>  container.alt = name;<br>  container.style.visibility = 'visible';<br>  height = container.height;<br>  widht = container.widht;<br>  size  = container.fileSize;<br><br><br>  this.get = function(name){<br>  return self[name];<br>  }<br><br>  this.isValid = function(){<br>  if(allowExt.indexOf(self.ext) !== -1){<br>   throw 'the ext is not allowed to upload';<br>   return false;<br>  }<br>  }<br> }<br></<SPAN class=end-tag>script</SPAN>><br>  <<SPAN class=start-tag>div</SPAN><SPAN class=attribute-name> class</SPAN>=<SPAN class=attribute-value>'previewDemo'</SPAN>><br> <<SPAN class=start-tag>input</SPAN><SPAN class=attribute-name> id</SPAN>=<SPAN class=attribute-value>"file" </SPAN><SPAN class=attribute-name>type</SPAN>=<SPAN class=attribute-value>"file" </SPAN><SPAN class=attribute-name>onchange</SPAN>=<SPAN class=attribute-value>"preivew(this, document.getElementById('img'));"</SPAN>><br> <<SPAN class=start-tag>img</SPAN><SPAN class=attribute-name> id</SPAN>=<SPAN class=attribute-value>"img" </SPAN><SPAN class=attribute-name>style</SPAN>=<SPAN class=attribute-value>"visibility:hidden" </SPAN><SPAN class=attribute-name>height</SPAN>=<SPAN class=attribute-value>"100px" </SPAN><SPAN class=attribute-name>width</SPAN>=<SPAN class=attribute-value>"100px"</SPAN>><br></<SPAN class=end-tag>div</SPAN>>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn