javascript - 使用javascript的vb.net文件上传预览图像

Question

我想使用 fileupload 上传图像并在提交前预览所选图像，但它只能在 Firefox 和 IE6 中工作。我想在 IE 7 8 和 chrome 中工作，它也应该在 Firefox 中工作

<style type="text/css">
#newPreview
{ 
  filter: progidXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    width: 136px;
    height: 134px;
    margin-left: 1px;
} 
</style>

<script language="javascript" type="text/javascript">
function PreviewImg(imgFile) {
    var newPreview = document.getElementById("newPreview");
    var src;
    if (document.all) {
        newPreview.innerHTML = "<img src=\"file:///" + imgFile.value + "\" width=\"130px\">";
    }
    else {
        newPreview.innerHTML = "<img src=\"" + imgFile.files.item(0).getAsDataURL() + "\" width=\"130px\">";
    }
}

    <form id="form1" runat="Server" method="post" enctype="multipart/form-data">
       <div id="newPreview">
      <asp:FileUpload ID="file" runat="server" size="20" Width="129px" 
          onchange="PreviewImg(this)"/>

Answer 1

尝试如下.. 它在 FireFox 和 Chrome 中工作

它会帮助你...

CSS：

<style>
#imgPreview
{ 
filter: progidXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width: 136px;
height: 134px;
margin-left: 1px;
} 
</style>

脚本：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script>
        function PreviewImg(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#imgPreview').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
</script>

HTML：

<asp:FileUpload ID="file" runat="server" size="20" Width="258px" 
          onchange="PreviewImg(this)"/>
          <img id="imgPreview" src="#"/>