兼容IE，Chrome，火狐，等主流浏览器的上传控件实例代码

本文转载自查看原文 2012-02-22 10:48 2387

使用微软自带的上传控件在Chrome下会显示不正常，所以可以自定义一个上传控件来达到兼容的目的：

1、首先需要引用JQuery脚本，在页面的<head>与</head>之间插入如下代码：

2、首先在前台我们这样设置，如下所示，将下面的这段代码放到页面的任意位置

   <%--Upload file content-- %>
             < div style ="width: 728px; float: left; margin-left: 10px; margin-top: 10px; border-bottom-style: solid;
                border-bottom-width: 1px; border-left-style: solid; border-left-width: 1px; border-right-style: solid;
                border-right-width: 1px; border-top-style: solid; border-top-width: 1px" >

                 < asp:UpdatePanel ID ="UpdatePanel2" runat ="server" UpdateMode ="Conditional" >
                     < ContentTemplate >
                         < div id ="enquiry_hw2" >
                             <%--Add upload file-- %>
                             < div >
                                 < input class ="input_text" readonly ="readonly" type ="text" id ="Text2" name ="txt" />
                                 <%--<asp:ImageButton CssClass= " dd1 " Visible= " false " ID= " btnUpload " runat= " server " Height= " 22px "
                                            Width= " 78px " OnClick= " btnUpload_Click " />-- %>
                             </ div >
                             < div id ="divfileTxt" runat ="server" class ="u-file-c" >
                                 < input type ="file" id ="File1" name ="attach" onchange ="txt.value=this.value" />< div
                                     id ="fileuploadtext" id ="div1" >
                                    选择上传文件 </ div >
                             </ div >
                             < script type ="text/javascript" >
                                $(document).ready( function () {
                                    $('.u-file-c').addClass('u-file-btn'); $('.u-file-c').each( function (i, el) {
                                        $( this).html($( this).html());
                                    })
                                }); </ script >
                             < asp:TextBox ID ="txtFileUploadRemark" runat ="server" Rows ="3" Height ="45px" TextMode ="MultiLine"
                                Width ="486px" ></ asp:TextBox >< br />
                         </ div >
</ ContentTemplate >
                 </ asp:UpdatePanel >
             </ div >

</div>

3、然后再项目中添加css文件，主要用到了如下的样式，如下所示：

.u-file-btn {

        position: relative; direction: ltr; height: 18px; overflow: hidden;
        line-height: 18px;   margin-right: 10px; padding: 3px 0;   margin-bottom: 6px;
        text-align: center;   width: 100px; background: #880000; color: #FFF;
}

.u-file-btn input{
        cursor: pointer; text-align: right; z-index: 10; font-size: 118px; /* font-size: 118px 工作正常 */
        position: absolute; top: 0px; right: 0px; opacity: 0; filter: Alpha(opacity:0);
}

4、后台是这样的：

   private void uploadFile()
    {
        HttpFileCollection files = HttpContext.Current.Request.Files;
         string popUploadtip = string.Empty;

        System.Text.StringBuilder strMsg = new System.Text.StringBuilder( " <br/> ");
         try
        {
             for ( int iFile = 0; iFile < files.Count; iFile++)
            {
                HttpPostedFile postedFile = files[iFile];
                 string fileName = string.Empty, fileExtension = string.Empty, handlefileName = string.Empty, filesubName = string.Empty;
                fileName = System.IO.Path.GetFileName(postedFile.FileName);
                 if (fileName != "")
                {
                    fileExtension = System.IO.Path.GetExtension(fileName);
                    filesubName = fileName.Substring( 0, fileName.IndexOf( " . "));

                    handlefileName = filesubName + " _ " + DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() +
                                    DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() +
                                    DateTime.Now.Second.ToString() + fileExtension;

                     if (postedFile.ContentLength < 1)
                    {
                         this.HiddenSaveUploadValue.Value = " UploadNothing ";

                        popUploadtip = " 您的文件内容为空，请重新选择文件! ";
                         this.RegScript( " \n<script type=\"text/javascript\">\n//<![CDATA[\n " + " alert(\" " + popUploadtip + " \") " + " \n//]]>\n</script> ");
                    }
                     else
                    {
                        postedFile.SaveAs(Server.MapPath( " Uploads/ ") + handlefileName);

                         this.HiddenSaveUploadValue.Value = " UploadSuccess ";

                        popUploadtip = " 上传文件成功! ";
                         this.RegScript( " \n<script type=\"text/javascript\">\n//<![CDATA[\n " + " alert(\" " + popUploadtip + " \") " + " \n//]]>\n</script> ");

                    }
                }
            }
        }
         catch
        {
             this.HiddenSaveUploadValue.Value = " UploadError ";

            popUploadtip = " 文件上传失败! ";
             this.RegScript( " \n<script type=\"text/javascript\">\n//<![CDATA[\n " + " alert(\" " + popUploadtip + ex.Message + " \") " + " \n//]]>\n</script> ");
        }
    }

5、这时可以运行，显示效果如下所示：

在IE中的效果：

在Chrome中的效果：

在火狐中的效果：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 关于IE、火狐等浏览器兼容问题的总结 JS如何判断IE和火狐与Chrome浏览器 JS控制图片翻转代码，兼容firefox，ie，chrome等浏览器 js在一个可编辑的div光标处插入图片或者文本（兼容ie，火狐等浏览器） swiper如何兼容ie浏览器 VUE项目兼容IE浏览器 WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理--01 python调用chrome ie等浏览器 CSS中使用text-align:justify让内容两端对齐并兼容IE及主流浏览器的方法兼容火狐浏览器的select下拉框样式