Vb.net文件上载预览图像使用javascript

Vb.net fileupload preview image using javascript

本文关键字：图像 javascript net 文件 上载 Vb      更新时间：2023-09-26

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

尝试如下:它可以在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="#"/>
相关文章：