使用javascript的Vb.net fileupload预览图像

时间:2013-04-11 12:00:22

标签: javascript html css vb.net

我想使用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)"/>

1 个答案:

答案 0 :(得分:0)

尝试如下..它在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="#"/>