Welcome 微信登录

首页 / 网页编程 / ASP.NET / 小技巧:图片在上传之前先预览,无需先上传到服务器上

小技巧:图片在上传之前先预览,无需先上传到服务器上2011-10-25 博客园 海洋我在网上看到好多人问如何使用FileUpload上传之前,先预览图片,前提条件,不允许先上传到服务 器上!因为大多搜索的结果实现的方法都是先上传到服务器上,然后显示,如果不确定上传,就删除,这 样的风险太大,性能也消耗很大!下面的代码告诉大家我们不需要先把图片上传到服务器上就可以预览了 ,是不是很酷!不说了,上代码!

<%@ Page Language="C#" %>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <script runat="server">  </script>  <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">  <title>Preview Image In FileUpload</title>  <style type="text/css">    #newPreview    {      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);    }  </style></head><body>    <script language="javascript" type="text/javascript">    function PreviewImg(imgFile)    {        var newPreview = document.getElementById("newPreview");      newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;      newPreview.style.width = "80px";      newPreview.style.height = "60px";    }    </script>    <form id="form2" runat="server">  <div>    <asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)" />  </div>  <div id="newPreview">  </div>  <input type="file" onchange="document.getElementById("img").src=this.value" />  <img id="img">  </form></body></html>
当然,如果你有更好的方法,也可以共享出来和大伙分享,谢谢了。