js实时显示上传的缩略图_js中如何获取input上传视频的缩略图-CSDN博客

本文链接：https://blog.csdn.net/u014545623/article/details/45720251

<script 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();   
	                     path=window.URL.createObjectURL( file.files.item(0));
	                 }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>  
   <div class='previewDemo'>  
    <input id="file" type="file" οnchange="preivew(this, document.getElementById('img'));">  
    <img id="img"  style="visibility:hidden" mce_style="visibility:hidden" height="100px" width="100px">  
</div>