使用FileUpload控件上传前预览图片

<table class="blue_table" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <th colspan="2">添加商品图片</th>
            </tr>
            <tr>
                <td>
                    <div id="img_div" runat="server" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width: 200px; height: 200px;margin:0 auto; margin-left:0px;border: 1px solid #e9ece5">
                        <img src="" runat="server"  alt="" /> 
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                    <asp:FileUpload ID="FileUpload1" runat="server" onchange="showimg('FileUpload1','img_div',200,200)" size="7" class="input" />
                </td>
            </tr>
        </table>

**************************

function clearfile(file,img,width,height)
{
   document.getElementById(file).parentNode.style.display="";
   document.getElementById(file).parentNode.innerHTML='<input type="file" name="'+file+'" id="'+file+'" onchange="showimg(\''+file+'\',\''+img+'\')" size="7" class="input" />';
   document.getElementById(img).innerHTML="<img style='width:"+width+"px;height:"+height+"px' src='' />";
}
function showimg(file,img,width,height)
{
    var dFile = document.getElementById(file);
    var dImg = document.getElementById(img);
    if(!getPath(dFile).match(/.jpg|.gif|.png|.bmp/i))
    {
        alert('上传图片格式必须是以下几种之一: .jpg , .gif , .bmp  或 .png !');
        clearfile(file,img);
        return;
    }
    if(dFile.files)
    {
        dImg.innerHTML="<img src='"+dFile.files[0].getAsDataURL()+"' style='width:"+width+"px;height:"+height+"px'/>";
    }
    else
    {
        if(dFile.value.indexOf('\\') > -1 || dFile.value.indexOf('\/') > -1)
        {
            dImg.innerHTML="";
            dImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = getPath(dFile);
        }
    }       
}
function getPath(obj) 
{   
    if(obj)     
    {      
        if (window.navigator.userAgent.indexOf("MSIE")>=1)       
        {         
            obj.select();        
            return document.selection.createRange().text;       
        }
        else if(window.navigator.userAgent.indexOf("Firefox")>=1)       
        {       
            if(obj.files)         
            {
                return obj.files.item(0).getAsDataURL();         
            }
            return obj.value;
        }  
        return obj.value;     
     }
 }

posted @   94cool  阅读(366)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
< 2010年10月 >
26 27 28 29 30 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 1 2 3 4 5 6
点击右上角即可分享
微信分享提示