使用JS实现在FileUpload控件中预览上传图片-CSDN博客

上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了。功能很简单，却很实用。

预览图片的js代码：

[javascript]view plaincopy 
   
 <script type="text/javascript">  
         function setImagePreview(docObj,localImagId,imgObjPreview)   
         {  
             if(docObj.files && docObj.files[0])  
             {  
                 //火狐下，直接设img属性  
                 imgObjPreview.style.display = 'block';  
                 imgObjPreview.style.width = '300px';  
                 imgObjPreview.style.height = '200px';                      
   
   
                 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式    
                 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);  /* 或者
			var file =fileQuery.files[0];  
			var reader = new FileReader();  
			reader.onload = function(e){ 
				obj.setAttribute("src",e.target.result) 
			} 
			reader.readAsDataURL(file);  
			*/
 
             }  
             else  
             {  
                 //IE下，使用滤镜  
                 docObj.select();  
                 var imgSrc = document.selection.createRange().text;  
                   
                 //必须设置初始大小  
                 localImagId.style.width = "300px";  
                 localImagId.style.height = "200px";  
                   
                 //图片异常的捕捉，防止用户修改后缀来伪造图片  
                 try  
                 {  
                     localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
                     localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
                  }  
                  catch(e)  
                  {  
                     alert("您上传的图片格式不正确，请重新选择!");  
                     return false;  
                   }                            
                   imgObjPreview.style.display = 'none';  
                   document.selection.empty();  
             }  
             return true;  
         }  
 </script>  

fileupload控件及用来预览图片的image：

[html]view plaincopy 
   
 <div id="localImag"  style="width: 300px; height: 200px">  
    <img id="preview" alt="预览图片" src="../../Images/noImage.gif" width="300px" height="200px" />  
 </div>  
 <asp:FileUpload ID="PicLoad" Width="300px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);"><span style="font-family: Arial, Helvetica, sans-serif;"></asp:FileUpload></span>  