使用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,如需转载请自行联系原作者

相关文章
|
9月前
|
域名解析 缓存 网络协议
零成本提速秘籍:手把手教你用Cloudflare为网站装上火箭引擎
本文介绍如何通过Cloudflare为WordPress个人博客加速,提升网站加载速度与安全性。从注册Cloudflare账号、添加域名到配置缓存、SSL/TLS及性能优化,详细步骤助您零基础上手。优化后使用WebPageTest验证效果,让博客加载更快、内容更安全,远离恶意侵扰,为访客带来流畅体验。
337 0
零成本提速秘籍:手把手教你用Cloudflare为网站装上火箭引擎
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
安全 网络安全 数据安全/隐私保护
内网IP地址实现HTTPS加密访问教程
在内网环境中,为确保数据传输的安全性,绑定SSL证书搭建HTTPS服务器至关重要。本文介绍了内网IP地址的前期准备、申请SSL证书的步骤以及客户端配置方法。具体包括选择合适的CA、注册账号、提交申请、下载证书,并在客户端导入根证书,确保通信数据的安全加密。推荐使用JoySSL提供的技术解决方案,确保内网设备通信安全。
内网IP地址实现HTTPS加密访问教程
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
908 0
Vue3表格(Table)
|
JavaScript 前端开发 API
Vue3基础(十yi)___常用生命周期函数___setup___onMounted___onUpdated
本文介绍了Vue 3中的常用生命周期函数,包括`setup`、`onBeforeMount`、`onMounted`、`onBeforeUpdate`、`onUpdated`、`onBeforeUnmount`和`onUnmounted`,并解释了它们与Vue 2生命周期钩子的对应关系。文章通过代码示例展示了这些生命周期钩子在组件中的使用时机和场景。
483 0
|
JavaScript 索引
Component name “index“ should always be multi-word vue/multi-word-component-names
Component name “index“ should always be multi-word vue/multi-word-component-names
|
算法 JavaScript 前端开发
JavaScript学习 -- RSA算法应用实例及公钥私钥的生成方法
JavaScript学习 -- RSA算法应用实例及公钥私钥的生成方法
720 0
|
Java 应用服务中间件 Linux
实战:第十三章:HTTP Status 500 – Internal Server Error(解决SpringBoot架构的Web项目部署到linux系统上访问出错)
实战:第十三章:HTTP Status 500 – Internal Server Error(解决SpringBoot架构的Web项目部署到linux系统上访问出错)
482 0
实战:第十三章:HTTP Status 500 – Internal Server Error(解决SpringBoot架构的Web项目部署到linux系统上访问出错)