jquery+ajax 文件上传功能-无ifram嵌套.docx

jquery+ajax 文件上传功能（无ifram嵌套）这两天做项目（MVC3），很多地方都需要使用到文件上传功能，但是采用的方式都是通过submit表单的方式来实现附件的上传的，这样感觉每次都要刷新页面很不爽，所以想来想去还是准备写一个通用的文件上传功能来实现文件上传。既然决定要做就马上动手，这次我采用的方式是，jquery+ajax来实现文件的上传，这里需要使用一个别人写的js插件：jquery-form.js，相关文档资料地址：/docs/jquery.form.plugin/jquery.form.plugin.html#api通过使用上述插件，我可以通过ajax来提交表单，而不会刷新页面。主要使用的方法是 $(#myformID).ajaxSubmit()方法。好了废话不多说，还是上代码：首先是展示页面需要做的：分别引入jquery.js，jquery-form.js，还有fileload.js以下是展示页面代码：+ View Code? $(document).ready(function() createHtml($(#str); ) 下面是fileload.js代码：View Code function createHtml(obj) var htmstr = ; htmstr.push( ); htmstr.push( ); htmstr.push( ); htmstr.push( 请选择文件：); htmstr.push( ); htmstr.push( ); htmstr.push( ); htmstr.push(   ); htmstr.push( 图片预览： ); htmstr.push( ) htmstr.push( ); 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 = remsg1.split(/); if (remsg0 = 1) var type = name4.substring(name4.indexOf(.), name4.length); $(#msg).html(文件名： + namename.length - 1 + - + remsg2); switch (type) case .jpg: case .jpeg: case .gif: case .bmp: case .png: $(img).attr( src: remsg1 ); break; default: $(img).attr( src: project/Images/msg_ok.png ); break; else $(#msg).html(文件上传失败： + remsg2); $(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.Files0; /开始上传 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; / / 获取文件名 / / / private string getName(string fileNamePath) string name = fileNamePath.Split(); return namename.Length - 1; / / 检查是否为合法的上传文件 / / / private bool CheckFileExt(string _fileExt) string allowExt = new string .gif, .jpg, .jpeg, .rar,.png ; for (int i = 0; i allowExt.Length; i+) if (allowExti = _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页面以后显示的效