兼容IE，Chrome，火狐，等主流浏览器的上传控件实例代码
使用微软自带的上传控件在Chrome下会显示不正常，所以可以自定义一个上传控件来达到兼容的目的：
1、首先需要引用JQuery脚本，在页面的<head>与</head>之间插入如下代码：
<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
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 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);
}
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>");
}
}
{
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中的效果：
在火狐中的效果：
