FileUpload控件预览图片
2018-06-18 02:38:44来源:未知 阅读 ()
HTML代码:
<tr> <td class="auto-style1">上传图片:</td> <td> <asp:FileUpload ID="FileUpload1" runat="server" onchange="chgImg(this)" /> <div> <img src="" id="Photo" runat="server" style="max-height: 80px" /> </div> <div id="preview"></div> <p>图片路径:<asp:Label ID="lalimageUrl" runat="server" Text=""></asp:Label></p> </td> </tr>
JS代码:
function chgImg(file){ //img控件预览图片 var FileUpload1 = $("#FileUpload1").val(); $("#Photo").attr("src", "file:///" + FileUpload1); //div预览图片(兼容模式) var prevDiv = document.getElementById('preview'); if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function (evt) { prevDiv.innerHTML = '<img src="' + evt.target.result + '" style="max-height:80px" />'; } reader.readAsDataURL(file.files[0]); } else { prevDiv.innerHTML = '<div class="img" style="max-height:80px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\')"></div>'; } }
实现效果,如图所示:
本文是实现了两种预览图片的形式,img控件展示和div展示 希望对大家有所帮助!
ps:建议选择div的展示好一些,兼容性要好。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Uediter的引用和取值
- 自定义日历(四)-区间选择控件 2019-11-02
- QRowTable表格控件(五)-重写表头排序、支持第三次单击恢复默 2019-09-17
- QRowTable表格控件(四)-效率优化之-优化数据源 2019-09-17
- Qt实现表格树控件-自绘树节点虚线 2019-08-16
- Qt实现表格树控件-支持多级表头 2019-08-16
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash