FileUpload控件预览图片

2018-06-17 21:32:59来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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>
View Code

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>';
        }
}
View Code

 实现效果,如图所示:

本文是实现了两种预览图片的形式,img控件展示和div展示  希望对大家有所帮助!

ps:建议选择div的展示好一些,兼容性要好。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:编程语言 IDE 对比

下一篇:亿级Web系统搭建——单机到分布式集群[转]