HTML+JS实现在图片上传前实现本地预览
发布时间：2018-10-03 18:18:00 所属栏目：创业 来源：站长网
导读：如何在图片上传前实现本地预览，这个功能实现起来似乎很简单，但却又是很棘手。 之前在从事项目开发中，遇到过这样的问题，原先有写好的代码，以为是很好实现的功能， 故没有特别在意。今天无意中研究了一下，原来并不像想象中的那样简单。直接上代码 如图
|
如何在图片上传前实现本地预览，这个功能实现起来似乎很简单，但却又是很棘手。 之前在从事项目开发中，遇到过这样的问题，原先有写好的代码，以为是很好实现的功能， 故没有特别在意。今天无意中研究了一下，原来并不像想象中的那样简单。直接上代码 如图
HTML代码： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<table> <tr> <td> <asp:FileUpload ID="BtnUpload" runat="server" onchange="onFilechange()" /> </td> </tr> <tr> <td> <img id="ImagePhoto" alt="" src="" height="100px" width="100px" /> <div id="pic" runat="server" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width: 100px; height: 100px; display: none"> </div> <asp:Button ID="Button1" runat="server" Text="上传" /> </td> </tr> <tr> <td> </td> </tr> </table> JS代码： Copy to Clipboard引用的内容：[www.veryhuo.com]
<script language="javascript" type="text/javascript"> function onFilechange() { var url = $("#BtnUpload").attr("value"); $("#ImagePhoto").css("width", "0"); $("#ImagePhoto").css("height", "0"); $("#pic").css("display", "block"); document.getElementById("pic").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url; } </script> 注意以下代码： Copy to Clipboard引用的内容：[www.veryhuo.com]
<div id="pic" runat="server" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width: 100px; height: 100px; display: none"> </div> 这里的div就是预览照片的，默认的image控件初始化的时候加载，当选择了新的照片后会隐藏image控件，显示Pic。 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读