FileUpLoad显示图片

<script language="javascript" type="text/javascript">
     function onUploadImgChange(sender,width,height,index){
            try
            {
                 index = index==undefined?"":index; 
                 if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){    
                     alert('请上传.jpg|.gif|.png|.bmp类型的图片'); 
                     return false;    
                 }    
                     
                 var objPreview = document.getElementById("imgBanner"+index);    
                 var objPreviewFake = document.getElementById("preview_fake"+index);       
                     
                 if( sender.files &&  sender.files[0] ){    
                     objPreview.style.display = "inline";
                     objPreview.style.width = width + 'px';    
                     objPreview.style.height = height + 'px';   
                     objPreview.src = sender.files[0].getAsDataURL();        
                 }else if( objPreviewFake.filters ){      
                     sender.select();    
                     var imgSrc = document.selection.createRange().text;    
                     objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;    

                     objPreviewFake.style.width = width + 'px';    
                     objPreviewFake.style.height = height + 'px';
                     objPreview.style.display = "none";
                     sender.blur();
                 }
             }catch(ex){
                alert("图片加载失败!");
             }   
         }   

    </script>


---样式
.preview_fake
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        }

 

 

 

 


<table border="" cellpadding="2" cellspacing="1" width="100%">
<tr>
<td>
<div id="preview_fake1" class="preview_fake">
<img id="imgBanner1" runat="server" src="~/image/yume_logo.gif" style="width:100px;height:100px" alt=""/>
</div>
</td>
<td>
<div id="preview_fake2" class="preview_fake">
<img id="imgBanner2" runat="server" src="~/image/yume_logo.gif" style="width:100px;height:100px" alt=""/>
</div>
</td>
<td>
<div id="preview_fake3" class="preview_fake">
<img id="imgBanner3" runat="server" src="~/image/yume_logo.gif" style="width:100px;height:100px" alt=""/>
</div>
</td>
<td>
<div id="preview_fake4" class="preview_fake">
<img id="imgBanner4" runat="server" src="~/image/yume_logo.gif" style="width:100px;height:100px" alt=""/>
</div>
</td>
</tr>
<tr>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" Width="144px" οnchange="onUploadImgChange(this,100,100,1);" />
</td>
<td>
<asp:FileUpload ID="FileUpload2" runat="server" Width="144px" οnchange="onUploadImgChange(this,100,100,2);" />
</td>
<td>
<asp:FileUpload ID="FileUpload3" runat="server" Width="144px" οnchange="onUploadImgChange(this,100,100,3);" />
</td>
<td>
<asp:FileUpload ID="FileUpload4" runat="server" Width="144px" οnchange="onUploadImgChange(this,100,100,4);" />
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server" Height="20px" Width="137px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Height="20px" Width="137px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Height="20px" Width="137px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Height="20px" Width="137px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<div id="preview_fake5" class="preview_fake">
<img id="imgBanner5" runat="server" src="~/image/yume_logo.gif" style="width:100px;height:100px" alt=""/>
</div>
</td>
<td>
<div id="preview_fake6" class="preview_fake">
<img id="imgBanner6" runat="server" src="~/image/yume_logo.gif" style="width:100px;height:100px" alt=""/>
</div>
</td>
<td>
<div id="preview_fake7" class="preview_fake">
<img id="imgBanner7" runat="server" src="~/image/yume_logo.gif" style="width:100px;height:100px" alt=""/>
</div>
</td>
<td>
<div id="preview_fake8" class="preview_fake">
<img id="imgBanner8" runat="server" src="~/image/yume_logo.gif" style="width:100px;height:100px" alt=""/>
</div>
</td>
</tr>
<tr>
<td>
<asp:FileUpload ID="FileUpload5" runat="server" Width="144px" οnchange="onUploadImgChange(this,100,100,5);" />
</td>
<td>
<asp:FileUpload ID="FileUpload6" runat="server" Width="144px" οnchange="onUploadImgChange(this,100,100,6);" />
</td>
<td>
<asp:FileUpload ID="FileUpload7" runat="server" Width="144px" οnchange="onUploadImgChange(this,100,100,7);" />
</td>
<td>
<asp:FileUpload ID="FileUpload8" runat="server" Width="144px" οnchange="onUploadImgChange(this,100,100,8);" />
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox5" runat="server" Height="23px" Width="137px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server" Height="23px" Width="137px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox7" runat="server" Height="23px" Width="137px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox8" runat="server" Height="23px" Width="137px"></asp:TextBox>
</td>
</tr>
</table>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值