小编最近遇到一个问题,在项目中用到了发送邮件的功能,发送邮件就需要上传附件
使用ajax异步刷新上传文件,并且兼容IE8浏览器
新建ASP.NET Web应用程序
页面效果
其中,用到了两个JS文件
链接:http://pan.baidu.com/s/1bo21xjp 密码:ensi
页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm.aspx.cs" Inherits="FileUpload.WebForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Source/jquery-1.7.1.js"></script>
<script src="Source/ajaxfileupload.js"></script>
</head>
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功" src="" /></p>
</body>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
ajaxFileUpload();
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/WebForm.aspx', //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
</script>
</html>
后台代码
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
namespace FileUpload
{
public partial class WebForm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection files = Request.Files;//这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > 0)
{
files[0].SaveAs(Server.MapPath("uploads/") + System.IO.Path.GetFileName(files[0].FileName));
msg = " 成功! 文件大小为:" + files[0].ContentLength;
imgurl = "/" + files[0].FileName;
string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res);
Response.End();
}
}
}
}
在做IE兼容性测试的时候,F12选择浏览器版本,上述代码兼容IE8、IE7、IE5
为什么没有IE6兼容模式?
相比 IE6 而言,IE7 没有提供巨大的实质上的内核功能升级,更多地是在打补丁、修 bug,可以说,IE6 和 IE7 这两个版本的内核是严重同质化的, IE6 的用户量本身也在自然萎缩,因此,当 IE8 推出时,它的元标记和开发工具就放弃了 IE6 模式。