使用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;      
     } 
 }




本文转自94cool博客园博客,原文链接:http://www.cnblogs.com/94cool/archive/2010/10/12/1848874.html,如需转载请自行联系原作者

相关文章
|
4月前
|
前端开发
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
327 1
上传文件资料并生成缩略图
上传文件资料并生成缩略图
364 0
上传文件资料并生成缩略图
|
JavaScript
预览本地图片原生js
预览本地图片原生js
|
前端开发 JavaScript HTML5
使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览。  在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。
1899 0
图片上传预览
     最近做需求时遇到的,上传的时候预览一下,一开始并没有想着用插件什么的,太复杂,只是个预览效果,不如自己写省事。前前后后也就几十行代码(包含头尾HTML、注释、输出调试),反正是比引用插件少多了,自己写也是个锻炼。
801 0
|
JavaScript 内存技术
|
Web App开发 JavaScript 内存技术