FileUpload控件預覽圖片

2019-11-14 15:53:16

字體：大中小

來源：轉載

供稿：網友

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