Maison >interface Web >js tutoriel >图片上传即时显示缩略图的js代码_图象特效
script<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> div<span class="attribute-name"> class</span>=<span class="attribute-value">'previewDemo'</span>><br> input<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> img<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>>