你的位置:首页 > ASP.net教程

[ASP.net教程]FileUpload控件预览图片


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 + '" />';      }      reader.readAsDataURL(file.files[0]);    }    else {      prevDiv.innerHTML = '<div color: #800000;">' + file.value + '\')"></div>';    }}

View Code

 实现效果,如图所示: