62,242
社区成员
发帖
与我相关
我的任务
分享求个完美兼容ie6+,FireFox,Chrome,世界之窗浏览器的极速、兼容模式和360浏览器的极速、兼容模式的文件上传控件
最近做的项目里用到了文件上传功能，我的做法是将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浏览器，世界之窗浏览器和火狐浏览器范围内。
做测试的时候，我的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浏览器，世界之窗浏览器和火狐浏览器范围内。
...全文
请发表友善的回复…
发表回复
helojcy 2015-02-06
- 打赏
- 举报
楼主问题解决了么？我最近也遇到了同样的问题，fileupload在IE8下无法上传
showjim 2014-06-19
- 打赏
- 举报
不好意思，ashx是否能用于文件上传我不清楚，我都是iframe+form提交。
陈悕 2014-06-19
- 打赏
- 举报
此问题解决了，但是又有新问题，我的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
- 打赏
- 举报
本来就是想问下有没有人遇到跟我一样的情况，如果有，不用代码也知道哪里有问题。下边贴代码吧
此段代码为页面加载时将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-18
- 打赏
- 举报
还有 this.value，这个this是上传控件，好像在各个浏览器上的this.value结果不一样， 有的是全路径，有的是文件名字， 这里是好像，忘记了，你看看
黑子大哥 2014-06-18
- 打赏
- 举报
本来就是想问下有没有人遇到跟我一样的情况，如果有，不用代码也知道哪里有问题。下边贴代码吧
此段代码为页面加载时将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-18
- 打赏
- 举报
这个情况倒是无所谓，原来我说的三个问题现在剩下两个了。
其一是在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
- 打赏
- 举报
本来就是想问下有没有人遇到跟我一样的情况，如果有，不用代码也知道哪里有问题。下边贴代码吧
此段代码为页面加载时将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
- 打赏
- 举报
怎么全是英文，有中文文档或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上推介的控件可以
黑子大哥 2014-06-17
- 打赏
- 举报
LZ 你带吗都没贴出来，谁知道你的问题在哪里
afhlm 2014-06-17
- 打赏
- 举报
SWFupload
陈悕 2014-06-17
- 打赏
- 举报
你写的这段代码，跟我写的那个this.fuldDoc.Attributes.Add("onchange", "document.getElementById(\"txtDoc\").value=this.value");是异曲同工，但我的问题还是没有解决
