求个完美兼容ie6+,FireFox,Chrome,世界之窗浏览器的极速、兼容模式和360浏览器的极速、兼容模式的文件上传控件

2014-06-17 11:43:25 1.3k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

解决ActiveX组件及Office程序等在Chrome、Edge新内核、360系列、FireFox、IE、Opera等桌面浏览器各版本中的嵌入使用问题牛插(PluginOK)中间件(原名:本网通WebRunLocal)是一个实现网页浏览器(Web Browser)与本地程序(Local Application)之间进行双向调用的低成本、强兼容、安全可控、轻量级、易集成、可扩展的浏览器小程序框架。通过本中间件可实现网页前端JS脚本无障碍操作本地电脑的各种硬件、调用本地系统API及相关组件功能，彻底解决ActiveX组件及Office程序等在Chrome、Edge新内核、360系列、FireFox、IE、Opera等桌面浏览器各版本中的嵌入使用问题，媲美原J 阅读详情

最近做的项目里用到了文件上传功能，我的做法是将fileupload控件隐藏，用一个button实现单击fileupload控件进行浏览文件，用一个textbox显示选中的文件名（就是给fileupload控件添加个onchange事件，赋值给textbox），再用一个button实现上传。
做测试的时候，我的ie版本是11，firefox和chrome都是最新版的，360浏览器也是最新版的。
结果在ie11里，Firefox里，chrome里都很正常，然后在360浏览器的极速模式下也正常，兼容模式下就必须要点两下上传按钮才能实现上传，这是问题之一。
后来我把网站发布到iie上，我同事访问网站后说点击浏览按钮时没有反应，他的ie版本是8，这是问题之二。
再然后我用IETester软件分别新建了ie6、7、8、9浏览器进行测试，结果是ie6和9下明明选择了文件却一直提示请选择文件，在ie7和8下一直提示脚本错误，这是问题之三。
这三个问题总体来说就是浏览器兼容问题，有何解决办法呢？
我说一下我的需求，我不需要多文件上传，可以实时上传也可以单击按钮上传，显示选中文件信息的文本框和浏览按钮和上传按钮要在同一行上，求大神指导。说这是因为我不会去使用类似uploadify的上传控件。
另外补充一点，我之所以用这么多的浏览器测试，是因为用户电脑全都是xp系统的，用的浏览器也大都在ie7、8、9,360浏览器，世界之窗浏览器和火狐浏览器范围内。

...全文

Chrome、FireFox、Edge等最新版浏览器中继续使用Flash Player方案一、背景最近大连车务段在其公众号发表了题为《全力攻关一昼夜，确保运输三十站》的文章，迅速在网络上引发了群嘲，面对舆论压力只好自行删除了此文。起因是其现在车子系统在浏览器中运行的网页代码依赖Flash Player控件的运行，而其开发商Adobe公司呢，完全没考虑商用业务系统的风险做了一个骚操作，在32后的版本中加入了“定时炸弹”，从2021年1月12日(美国时间)开始禁止Flash内容在Flash Player中运行，而Flash Player在Windows 8及以上版本的操作系统中一直是内置自动更新阅读详情

陈悕

.NET社区 62,271 成员 668,968 内容

+ 关注 + 加入社区

切换为时间正序

helojcy 2015-02-06

打赏
举报

楼主问题解决了么？我最近也遇到了同样的问题，fileupload在IE8下无法上传

showjim 2014-06-19

打赏
举报

引用 17 楼 cx067261 的回复:

此问题解决了，但是又有新问题，我的ajaxsubmit已经将数据提交到了ashx里，ashx里执行的很顺利，没有任何错误。但是执行完ashx后直接就走error里定义的函数函数了，这是为什么

不好意思，ashx是否能用于文件上传我不清楚，我都是iframe+form提交。

陈悕 2014-06-19

打赏
举报

引用 16 楼 sbwwkmyd 的回复:

我的fileClicker是这样的：初始状态：将input设为透明、绝对定位、不显示、size=1。当鼠标移动到图片上时，将input设为显示并锁定到鼠标x-80,y-8的位置(图片与input都要设置鼠标移动事件)。当鼠标移出图片范围时恢复初始状态。

此问题解决了，但是又有新问题，我的ajaxsubmit已经将数据提交到了ashx里，ashx里执行的很顺利，没有任何错误。但是执行完ashx后直接就走error里定义的函数函数了，这是为什么

showjim 2014-06-19

打赏
举报

我的fileClicker是这样的：初始状态：将input设为透明、绝对定位、不显示、size=1。当鼠标移动到图片上时，将input设为显示并锁定到鼠标x-80,y-8的位置(图片与input都要设置鼠标移动事件)。当鼠标移出图片范围时恢复初始状态。

陈悕 2014-06-19

打赏
举报

我原来的上传按钮时服务器控件，点击之后会将fileupload的值清空，可是我把上传按钮换成html控件后就不会清空，现在只能这样做了。但是问题又出来了，ie有个安全机制，不能用js操作，也就是说form.submit()时会报拒绝访问的错误，在网上找了相关解决方案，都说要用个图片覆盖fileupload，我给图片加了个style="position:absolute"，确实覆盖了，但是覆盖之后点击的是图片，怎么会点击到fileupload呢？

zhaodehai 2014-06-18

打赏
举报

最近问这个问题的人，特别多，我这里也想要个这样的demo ，群里的高手，能不能提供个完美的解决方案

陈悕 2014-06-18

打赏
举报

引用 10 楼 qhttl 的回复:

[quote=引用 9 楼 cx067261 的回复:] [quote=引用 4 楼 qhttl 的回复:] LZ 你带吗都没贴出来，谁知道你的问题在哪里

本来就是想问下有没有人遇到跟我一样的情况，如果有，不用代码也知道哪里有问题。下边贴代码吧此段代码为页面加载时将fileupload隐藏和添加onchange事件


 this.fuldDoc.Style.Add("display", "none");
this.fuldDoc.Attributes.Add("onchange", "document.getElementById(\"txtDoc\").value=this.value");

此段代码为前台页面显示的内容


<td valign="top">
       <div align="right">
            行程文档：</div>
</td>
<td colspan="3">
        <div align="left" style="color: #FF0000;">
            <asp:TextBox ID="txtDoc" runat="server" ReadOnly="true" Width="437px" CssClass="txtarea"></asp:TextBox>
            <asp:FileUpload ID="fuldDoc" runat="server" Height="20px" />
            <input type="button" id="btnBrowse" value="浏览..." onclick="javascript:document.getElementById('fuldDoc').click();" />
            <asp:Button ID="btnUploadDoc" runat="server" Text="上传" OnClick="btnUploadDoc_Click" />
            <asp:Label ID="lblTip" runat="server" Text=""></asp:Label>
        </div>
</td>

此段代码为上传按钮单击事件代码


protected void btnUploadDoc_Click(object sender, EventArgs e)
        {
            try
            {
                if (this.fuldDoc.HasFile)
                {
                    string fileName = this.fuldDoc.FileName;  //获取文件的名称
                    int index = fileName.LastIndexOf('.');    //获取文件后缀名的.的位置
                    string fileType = fileName.Substring(index).ToLower(); //获取文件扩展名
                    if (fileType.ToLower().Equals(".doc") || fileType.ToLower().Equals(".docx"))
                    {
                        string fileNewName = System.DateTime.Now.ToString("yyyyMMddHHmmss") + fileType; //重新命名文件名称
                        string filePath = Server.MapPath("/upload/file/" + System.DateTime.Now.ToString("yyyy-MM-dd") + "/");
                        if (!Directory.Exists(filePath))
                            Directory.CreateDirectory(filePath); //创建文件夹
                        string fileUrl = filePath + fileNewName;
                        this.fuldDoc.SaveAs(fileUrl);
                        
                        this.lblTip.Text = "上传成功";
                        this.txtDoc.Text = BasicPage.BecomeVirtualPath(fileUrl);//将物理路径转换为虚拟路径               
                    }
                    else
                        this.lblTip.Text = "格式不正确，上传的文件必须是doc或docx格式";
                }
                else
                    this.lblTip.Text = "请选择上传的文件";
            }
            catch
            {
                this.lblTip.Text = "上传失败，请联系管理员";
            }
        }

可有看出什么不对？[/quote] 上传代码不用看，你是浏览器不兼容的问题我觉得可能有问题的地方在 javascript:document.getElementById('fuldDoc').click() fuldDoc 这个ID是服务器控件ID 不是客户端控件ID，可能没找到ID，你需要这样 javascript:document.getElementById('<%=fuldDoc.ClentID%>').click() 纯手打可能有错你所谓的这种问题每个人都遇到，只是和你一样而已，浏览器不兼容[/quote] 也不行，还是一样的问题

黑子大哥 2014-06-18

打赏
举报

还有 this.value，这个this是上传控件，好像在各个浏览器上的this.value结果不一样，有的是全路径，有的是文件名字，这里是好像，忘记了，你看看

黑子大哥 2014-06-18

打赏
举报

引用 9 楼 cx067261 的回复:

[quote=引用 4 楼 qhttl 的回复:] LZ 你带吗都没贴出来，谁知道你的问题在哪里


 this.fuldDoc.Style.Add("display", "none");
this.fuldDoc.Attributes.Add("onchange", "document.getElementById(\"txtDoc\").value=this.value");

此段代码为前台页面显示的内容


<td valign="top">
       <div align="right">
            行程文档：</div>
</td>
<td colspan="3">
        <div align="left" style="color: #FF0000;">
            <asp:TextBox ID="txtDoc" runat="server" ReadOnly="true" Width="437px" CssClass="txtarea"></asp:TextBox>
            <asp:FileUpload ID="fuldDoc" runat="server" Height="20px" />
            <input type="button" id="btnBrowse" value="浏览..." onclick="javascript:document.getElementById('fuldDoc').click();" />
            <asp:Button ID="btnUploadDoc" runat="server" Text="上传" OnClick="btnUploadDoc_Click" />
            <asp:Label ID="lblTip" runat="server" Text=""></asp:Label>
        </div>
</td>

此段代码为上传按钮单击事件代码


protected void btnUploadDoc_Click(object sender, EventArgs e)
        {
            try
            {
                if (this.fuldDoc.HasFile)
                {
                    string fileName = this.fuldDoc.FileName;  //获取文件的名称
                    int index = fileName.LastIndexOf('.');    //获取文件后缀名的.的位置
                    string fileType = fileName.Substring(index).ToLower(); //获取文件扩展名
                    if (fileType.ToLower().Equals(".doc") || fileType.ToLower().Equals(".docx"))
                    {
                        string fileNewName = System.DateTime.Now.ToString("yyyyMMddHHmmss") + fileType; //重新命名文件名称
                        string filePath = Server.MapPath("/upload/file/" + System.DateTime.Now.ToString("yyyy-MM-dd") + "/");
                        if (!Directory.Exists(filePath))
                            Directory.CreateDirectory(filePath); //创建文件夹
                        string fileUrl = filePath + fileNewName;
                        this.fuldDoc.SaveAs(fileUrl);
                        
                        this.lblTip.Text = "上传成功";
                        this.txtDoc.Text = BasicPage.BecomeVirtualPath(fileUrl);//将物理路径转换为虚拟路径               
                    }
                    else
                        this.lblTip.Text = "格式不正确，上传的文件必须是doc或docx格式";
                }
                else
                    this.lblTip.Text = "请选择上传的文件";
            }
            catch
            {
                this.lblTip.Text = "上传失败，请联系管理员";
            }
        }

陈悕 2014-06-18

打赏
举报

引用 11 楼 qhttl 的回复:

还有 this.value，这个this是上传控件，好像在各个浏览器上的this.value结果不一样，有的是全路径，有的是文件名字，这里是好像，忘记了，你看看

这个情况倒是无所谓，原来我说的三个问题现在剩下两个了。其一是在360浏览器兼容模式下选择完文件后点击两下上传按钮在能实现上传。其二是在ie8、9下选择文件后上传控件是有值的，但是当我点击上传按钮时，自动清空了上传控件的值，当我点击第二次时就因为没有值而无法上传。大神们，此又何解？

md5e 2014-06-17

打赏
举报

<form id="form1" runat="server" enableviewstate=false> <div style="position:relative;"> <asp:TextBox enableviewstate=false ID="txtUploadFile" runat="server" Width="160px" ></asp:TextBox> <input type="button" value="测试" style="width:100px;"/> <asp:FileUpload ID="FileUpload1" style="position:absolute; width:100px; left:160px; top:0; z-index:99;opacity:0;filter: alpha(opacity=0);" onchange="UploadOnpropertychange()" runat="server" CssClass="cssfile" /> <asp:Button ID="Button1" enableviewstate=false runat="server" Text="Button" onclick="Button1_Click" style="height: 21px" /> </div> </form> <script type="text/javascript" language="javascript"> function UploadOnpropertychange() { var varUploadFile = document.getElementById("FileUpload1").value; document.getElementById("txtUploadFile").value = varUploadFile; } </script>

陈悕 2014-06-17

打赏
举报

引用 4 楼 qhttl 的回复:

LZ 你带吗都没贴出来，谁知道你的问题在哪里


 this.fuldDoc.Style.Add("display", "none");
this.fuldDoc.Attributes.Add("onchange", "document.getElementById(\"txtDoc\").value=this.value");

此段代码为前台页面显示的内容


<td valign="top">
       <div align="right">
            行程文档：</div>
</td>
<td colspan="3">
        <div align="left" style="color: #FF0000;">
            <asp:TextBox ID="txtDoc" runat="server" ReadOnly="true" Width="437px" CssClass="txtarea"></asp:TextBox>
            <asp:FileUpload ID="fuldDoc" runat="server" Height="20px" />
            <input type="button" id="btnBrowse" value="浏览..." onclick="javascript:document.getElementById('fuldDoc').click();" />
            <asp:Button ID="btnUploadDoc" runat="server" Text="上传" OnClick="btnUploadDoc_Click" />
            <asp:Label ID="lblTip" runat="server" Text=""></asp:Label>
        </div>
</td>

此段代码为上传按钮单击事件代码


protected void btnUploadDoc_Click(object sender, EventArgs e)
        {
            try
            {
                if (this.fuldDoc.HasFile)
                {
                    string fileName = this.fuldDoc.FileName;  //获取文件的名称
                    int index = fileName.LastIndexOf('.');    //获取文件后缀名的.的位置
                    string fileType = fileName.Substring(index).ToLower(); //获取文件扩展名
                    if (fileType.ToLower().Equals(".doc") || fileType.ToLower().Equals(".docx"))
                    {
                        string fileNewName = System.DateTime.Now.ToString("yyyyMMddHHmmss") + fileType; //重新命名文件名称
                        string filePath = Server.MapPath("/upload/file/" + System.DateTime.Now.ToString("yyyy-MM-dd") + "/");
                        if (!Directory.Exists(filePath))
                            Directory.CreateDirectory(filePath); //创建文件夹
                        string fileUrl = filePath + fileNewName;
                        this.fuldDoc.SaveAs(fileUrl);
                        
                        this.lblTip.Text = "上传成功";
                        this.txtDoc.Text = BasicPage.BecomeVirtualPath(fileUrl);//将物理路径转换为虚拟路径               
                    }
                    else
                        this.lblTip.Text = "格式不正确，上传的文件必须是doc或docx格式";
                }
                else
                    this.lblTip.Text = "请选择上传的文件";
            }
            catch
            {
                this.lblTip.Text = "上传失败，请联系管理员";
            }
        }

可有看出什么不对？

陈悕 2014-06-17

打赏
举报

引用 7 楼 webdiyer 的回复:

我原来也用过swfupload，这是一个flash做的上传插件，已经很久没更新了，后来发现一个更强的plupload，它不但自带flash插件，而且还带有silverlight和html5运行时，在支持html5的浏览器里可以使用html5，不支持的可以退化为flash或silverlight，另外还支持分块上传，这样就无需设置web.config而实现任意大小的文件上传，plupload的官方网站是：http://www.plupload.com

怎么全是英文，有中文文档或demo吗，完全看不懂啊

webdiyer 2014-06-17

打赏
举报

我原来也用过swfupload，这是一个flash做的上传插件，已经很久没更新了，后来发现一个更强的plupload，它不但自带flash插件，而且还带有silverlight和html5运行时，在支持html5的浏览器里可以使用html5，不支持的可以退化为flash或silverlight，另外还支持分块上传，这样就无需设置web.config而实现任意大小的文件上传，plupload的官方网站是：http://www.plupload.com

赢友网络 2014-06-17

打赏
举报

用swfupload

黑子大哥 2014-06-17

打赏
举报

LZ上推介的控件可以

引用 3 楼 afhlm 的回复:

SWFupload

黑子大哥 2014-06-17

打赏
举报

LZ 你带吗都没贴出来，谁知道你的问题在哪里

afhlm 2014-06-17

打赏
举报

SWFupload

陈悕 2014-06-17

打赏
举报

引用 1 楼 liuchaolin 的回复:

<form id="form1" runat="server" enableviewstate=false> <div style="position:relative;"> <asp:TextBox enableviewstate=false ID="txtUploadFile" runat="server" Width="160px" ></asp:TextBox> <input type="button" value="测试" style="width:100px;"/> <asp:FileUpload ID="FileUpload1" style="position:absolute; width:100px; left:160px; top:0; z-index:99;opacity:0;filter: alpha(opacity=0);" onchange="UploadOnpropertychange()" runat="server" CssClass="cssfile" /> <asp:Button ID="Button1" enableviewstate=false runat="server" Text="Button" onclick="Button1_Click" style="height: 21px" /> </div> </form> <script type="text/javascript" language="javascript"> function UploadOnpropertychange() { var varUploadFile = document.getElementById("FileUpload1").value; document.getElementById("txtUploadFile").value = varUploadFile; } </script>

你写的这段代码，跟我写的那个this.fuldDoc.Attributes.Add("onchange", "document.getElementById(\"txtDoc\").value=this.value");是异曲同工，但我的问题还是没有解决

求个完美兼容ie6+,FireFox,Chrome,世界之窗浏览器的极速、兼容模式和360浏览器的极速、兼容模式的文件上传控件

相关推荐