这两天做项目（MVC3），很多地方都需要使用到文件上传功能，但是采用的方式都是通过submit表单的方式来实现附件的上传的，这样感觉每次都要刷新页面很不爽，所以想来想去还是准备写一个通用的文件上传功能来实现文件上传。
既然决定要做就马上动手，这次我采用的方式是，jquery+ajax来实现文件的上传，这里需要使用一个别人写的js插件：jquery-form.js，相关文档资料地址：http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#api
通过使用上述插件，我可以通过ajax来提交表单，而不会刷新页面。主要使用的方法是 $("#myformID").ajaxSubmit()方法。
好了废话不多说，还是上代码：
首先是展示页面需要做的：分别引入jquery.js，jquery-form.js，还有fileload.js
以下是展示页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS/Style.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script src="project/js/jquery.form.js" type="text/javascript"></script>
<script src="project/js/fileload.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
createHtml($("#str"));
})
</script>
</head>
<body>
<div id="str">
</div>
</body>
</html>
下面是fileload.js代码：
View Code
function createHtml(obj) { var htmstr = []; htmstr.push( "<form id='_fileForm' enctype='multipart/form-data'>"); htmstr.push( "<table cellspacing=\"0\" cellpadding=\"3\" style=\"margin:0 auto; margin-top:20px;\">"); htmstr.push( "<tr>"); htmstr.push( "<td class=\"tdt tdl\">请选择文件：</td>"); htmstr.push( "<td class=\"tdt tdl\"><input id=\"loadcontrol\" type=\"file\" name=\"filepath\" id=\"filepath\" /></td>"); htmstr.push( "<td class=\"tdt tdl tdr\"><input type=\"button\" onclick=\"fileloadon()\" value=\"上传\"/></td>"); htmstr.push( "</tr>"); htmstr.push( "<tr> <td class=\"tdt tdl tdr\" colspan='3'style='text-align:center;'><div id=\"msg\"> </div></td> </tr>"); htmstr.push( "<tr> <td class=\"tdt tdl tdr\" style=\" vertical-align:middle;\">图片预览：</td> <td class=\"tdt tdl tdr\" colspan=\"2\"><div style=\"text-align:center;\"><img src=\"project/Images/NoPhoto.jpg\"/></div></td> </tr>"); htmstr.push( "</table>") htmstr.push( "</form>"); obj.html(htmstr.join("")); } function fileloadon() { $("#msg").html(""); $("img").attr({ "src": "project/Images/processing.gif" }); $("#_fileForm").submit(function () { $("#_fileForm").ajaxSubmit({ type: "post", url: "project/help.aspx", success: function (data1) { var remsg = data1.split("|"); var name = remsg[1].split("\/"); if (remsg[0] == "1") { var type = name[4].substring(name[4].indexOf("."), name[4].length); $("#msg").html("文件名：" + name[name.length - 1] + " --- " + remsg[2]); switch (type) { case ".jpg": case ".jpeg": case ".gif": case ".bmp": case ".png": $("img").attr({ "src": remsg[1] }); break; default: $("img").attr({ "src": "project/Images/msg_ok.png" }); break; } } else { $("#msg").html("文件上传失败：" + remsg[2]); $("img").attr({ "src": "project/Images/msg_error.png" }); } }, error: function (msg) { alert("文件上传失败"); } }); return false; }); $("#_fileForm").submit(); }
在下面是服务页面的代码：
View Code
protected void Page_Load(object sender, EventArgs e) { try { HttpPostedFile postFile = Request.Files[0]; //开始上传 string _savedFileResult = UpLoadFile(postFile); Response.Write(_savedFileResult); } catch(Exception ex) { Response.Write("0|error|上传提交出错"); } } public string UpLoadFile(HttpPostedFile str) { return UpLoadFile(str, "/UpLoadFile/"); } public string UpLoadFile(HttpPostedFile httpFile, string toFilePath) { try { //获取要保存的文件信息 string filerealname = httpFile.FileName; //获得文件扩展名 string fileNameExt = System.IO.Path.GetExtension(filerealname); if (CheckFileExt(fileNameExt)) { //检查保存的路径 是否有/结尾 if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/"; //按日期归类保存 string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/"; if (true) { toFilePath += datePath; } //物理完整路径 string toFileFullPath = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + toFilePath; //检查是否有该路径 没有就创建 if (!System.IO.Directory.Exists(toFileFullPath)) { Directory.CreateDirectory(toFileFullPath); } //得到服务器文件保存路径 string toFile = Server.MapPath("~" + toFilePath); string f_file = getName(filerealname); //将文件保存至服务器 httpFile.SaveAs(toFile + f_file); return "1|" + toFilePath + f_file + "|" + "文件上传成功"; } else { return "0|errorfile|" + "文件不合法"; } } catch (Exception e) { return "0|errorfile|" + "文件上传失败,错误原因：" + e.Message; } } /// <summary> /// 获取文件名 /// </summary> /// <param name="fileNamePath"></param> /// <returns></returns> private string getName(string fileNamePath) { string[] name = fileNamePath.Split('\\'); return name[name.Length - 1]; } /// <summary> /// 检查是否为合法的上传文件 /// </summary> /// <param name="_fileExt"></param> /// <returns></returns> private bool CheckFileExt(string _fileExt) { string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".rar",".png" }; for (int i = 0; i < allowExt.Length; i++) { if (allowExt[i] == _fileExt) { return true; } } return false; } public static string GetFileName() { Random rd = new Random(); StringBuilder serial = new StringBuilder(); serial.Append(DateTime.Now.ToString("HHmmss")); serial.Append(rd.Next(100, 999).ToString()); return serial.ToString(); }
代码比较简单，看官有疑问可以评论，我会逐一回复。
运行defualt.aspx页面以后显示的效果是：
上传图片则显示对应的图片：
上传压缩文件（.rar）则显示上传成功图片：
由于服务端对文件类型有限制，如果需要支持更多类型的文件，请在服务端代码中进行修改。
界面比较粗糙，看官见笑了...
附上源代码（直接通过调试运行代码，显示不出图片预览，发布出来以后就没有问题）：https://files.cnblogs.com/xlhblogs/ajax_FileUP.rar