FileUpload一键自动上传

FileUpload一键自动上传

1. 背景

• 源程序二次修改
• 传统的Asp.net WebForm开发
• 上传控件样式可自定义

分析

• 不能用第三方插件，因为源程序开发模式对异步的支持不友好而第三方插件大都是针对异步编程的
• 兼容IE8及以上和其他主流浏览器如谷歌...等，其中IE8的安全机制要求必须客户端用户真实的点击上传按钮，否则拒绝操作

方案

• 传统控件组合展示上传控件样式
• 上传控件透明并覆盖到上面的传统控件组合之上

代码

• js

function uploadFile(filePath) {
                if (filePath.length > 0) {
                    __doPostBack('btnUploadFile', '');
                }
            }

• html

<div style="position: absolute; z-index: 9; margin-top: 5px">
                            <img src="../../Images/Excel.gif" style="border: 0; vertical-align: middle" alt="" />一键导入
                        </div>
                        <asp:FileUpload ID="TxtAffix" runat="server" Width="80px" onchange="uploadFile(this.value)" Style=" opacity:0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); z-index: 999; position: relative" />
                        <asp:Button runat="server" ID="btnUploadFile" OnClick="BtnImp_Click" Style="display: none" />

c#

protected void BtnImp_Click(object sender, EventArgs e)
    {
        try
        {
            this.tHelp.Text = "";
            if (TxtAffix.HasFile)
            {
              //code
            }
         }
   }

posted @ 2017-05-10 10:46 画个逗号给明天 阅读( ...) 评论( ...) 编辑 收藏