码迷,mamicode.com
首页 > 其他好文 > 详细

FileUpload控件预览图片

时间:2015-07-31 14:28:27      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:

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

 

FileUpload控件预览图片

标签:

原文地址:http://www.cnblogs.com/liuyanpeng/p/4691996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!