0

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)"/>

4

1 に答える 1

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="#"/>
于 2013-04-11T12:26:55.987 に答える