当前位置:Gxlcms > asp.net > asp.net实现文件无刷新上传方法汇总

asp.net实现文件无刷新上传方法汇总

时间:2021-07-01 10:21:17 帮助过:6人阅读

遇到上传文件的问题,结合之前用到过的swfUpload,又找了一个无刷新上传文件的jquery插件uploadify,写篇博客记录一下分别介绍这两个的实现方法

swfUpload 导入swfUpload的开发包 添加js引用,引用swfUpload.js与handler.js文件,如果对swfUpload不了解、有疑问可以看看这篇文章 页面初始化

修改handler.js文件中 上传成功的事件,serverData是服务器端的响应

Uploadify 导入uploadify开发包,从官网下载,官网文档,中文文档,官网示例 添加js与css的引用,jquery.uploadify.js 、uploadify.css

(注:在css中引用uploadify-cancel.png图片文件的路径是可能不正确,可以在uploadify.css文件中自己进行更改)

页面初始化

页面初始化时,可以指定许多设置,并对上传成功的事件进行重载,data表示服务器端的响应

服务器端上传处理程序

  1. //uploadify初始化
  2. $(function () {
  3. $('#file_upload').uploadify({
  4. //指定swf
  5. 'swf': '/uploadify/uploadify.swf',
  6. //服务器端处理程序
  7. 'uploader': '/Admin/UploadFileHandler.ashx',
  8. //按钮文本
  9. buttonText: '上传附件',
  10. //文件类型
  11. fileTypeExts: "*.zip;*.rar;*.doc;*.docx;*.xls;*xlsx",
  12. onUploadSuccess: OnFileUploadSuccess
  13. });
  14. });
  15. function OnFileUploadSuccess(file, data, response) {
  16. //服务器端响应
  17. if (data == 'noPermission') {
  18. alert('没有上传权限');
  19. }
  20. if (data == 'Error') {
  21. alert('上传失败');
  22. } else if (response) {
  23. alert('上传成功~~~');
  24. $("#filePath").val(data);
  25. }
  26. }
  27. uploadify
  1. /// <summary>
  2. /// 上传文件
  3. /// </summary>
  4. public class UploadFileHandler : IHttpHandler, IRequiresSessionState
  5. {
  6. public void ProcessRequest(HttpContext context)
  7. {
  8. context.Response.ContentType = "text/plain";
  9. //验证上传权限
  10. if (context.Session["User"] == null)
  11. {
  12. context.Response.Write("no permission");
  13. context.Response.End();
  14. return;
  15. }
  16. try
  17. {
  18. //获取上传文件
  19. //Filedata是客户端已经定义好的,如果想要更改,更改js文件中的配置
  20. HttpPostedFile image_upload = context.Request.Files["Filedata"];
  21. //获取文件扩展名
  22. string fileExt = System.IO.Path.GetExtension(image_upload.FileName).ToLower();
  23. //验证文件扩展名是否符合要求,是否是允许的图片格式
  24. if (!FileTypes.IsAllowed(fileExt))
  25. {
  26. return;
  27. }
  28. //当前时间字符串
  29. string timeString = DateTime.Now.ToString("yyyyMMddHHmmssfff");
  30. //保存虚拟路径构建
  31. string path = "/Upload/" + timeString + fileExt;
  32. //获取、构建要上传文件的物理路径
  33. string serverPath = context.Server.MapPath("~/" + path);
  34. //保存图片到服务器
  35. image_upload.SaveAs(serverPath);
  36. //
输出保存路径 context.Response.Write(path); } catch (Exception ex) { context.Response.Write("Error"); //记录日志 new Common.LogHelper(typeof(UploadFileHandler)).Error(ex); } } public bool IsReusable { get { return false; } } } public static class FileTypes { private static List<string> allowedFileTypes = new List<string>(); //获取允许json配置文件 private static string jsonFilePath = Common.PathHelper.MapPath("~/AllowedFileTypes.json"); /// <summary> /// 允许的文件类型 /// </summary> public static List<string> AllowedFileTypes { get { return allowedFileTypes; } set { allowedFileTypes = value; } } /// <summary> /// 静态构造方法 /// </summary> static FileTypes() { LoadFileTypesFromJson(); } /// <summary> /// 从json文件中读取允许上传的文件类型 /// </summary> private static void LoadFileTypesFromJson() { string types = File.ReadAllText(jsonFilePath); AllowedFileTypes = Common.ConverterHelper.JsonToObject<List<string>>(types); } /// <summary> /// 当添加允许文件类型时,更新到json文件 /// </summary> public static void FileTypesToJson() { string types = Common.ConverterHelper.ObjectToJson(AllowedFileTypes); File.WriteAllText(jsonFilePath, types); } /// <summary> /// 新增允许上传文件扩展名 /// </summary> /// <param name="newFileType"></param> public static void AddNewFileType(string newFileType) { AllowedFileTypes.Add(newFileType); FileTypesToJson(); } /// <summary> /// 判断某种文件类型是否允许上传 /// </summary> /// <param name="fileExt">文件扩展名</param> /// <returns>是否允许上传<code>true</code>允许上传</returns> public static bool IsAllowed(string fileExt) { foreach (string item in AllowedFileTypes) { if (fileExt.Equals(fileExt)) { return true; } } return false; } }

以上所述就是本文的全部内容了,希望大家能够喜欢。

人气教程排行