Home > Web Front-end > JS Tutorial > 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
Release: 2016-05-16 18:52:21
Original
1014 people have browsed it
<<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>>
Copy after login
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template