• 全部
  • .NET Framework
  • ASP
  • Web Services
  • .NET互联网桌面应用
  • VB
  • 图表区
  • 分析与设计
  • 组件/控件开发
  • AppLauncher
  • 问答

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

陈悕 郑州极锐软件科技有限公司 网站工程师  2014-06-17 11:43:25
最近做的项目里用到了文件上传功能,我的做法是将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浏览器,世界之窗浏览器和火狐浏览器范围内。
...全文
838 点赞 收藏 19
写回复
19 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
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 你带吗都没贴出来,谁知道你的问题在哪里
本来就是想问下有没有人遇到跟我一样的情况,如果有,不用代码也知道哪里有问题。下边贴代码吧 此段代码为页面加载时将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() 纯手打 可能有错 你所谓的这种问题每个人都遇到,只是和你一样而已,浏览器不兼容
回复
陈悕 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 你带吗都没贴出来,谁知道你的问题在哪里
本来就是想问下有没有人遇到跟我一样的情况,如果有,不用代码也知道哪里有问题。下边贴代码吧 此段代码为页面加载时将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 = "上传失败,请联系管理员";
            }
        }
可有看出什么不对?
回复
陈悕 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");是异曲同工,但我的问题还是没有解决
回复
相关推荐
发帖
.NET技术社区
创建于2007-09-28

5.8w+

社区成员

.NET技术交流专区
申请成为版主
帖子事件
创建了帖子
2014-06-17 11:43
社区公告
暂无公告