您现在的位置是:网站首页> 编程资料编程资料
ASP.NET MVC使用JSAjaxFileUploader插件实现单文件上传_实用技巧_
2023-05-24
337人已围观
简介 ASP.NET MVC使用JSAjaxFileUploader插件实现单文件上传_实用技巧_
先看效果:
- 上传文件显示进度条:

- 停止上传按钮和关闭缩略图按钮:

- 限制上传文件的类型:

- 限制上传文件的尺寸:

- 上传成功后显示缩略图、文件名以及回传信息:

- 点击界面上的删除按钮,界面删除,同步删除文件夹中文件。
- 重新上传文件,界面删除,同步删除文件夹中文件,并界面显示新的缩略图、文件名等。
HomeController
由于需要把保存到文件夹文件的路径、文件名等回传给界面,所以需要一个类,专门负责回传给客户端所需要的信息。
public class UploadFileResult { public string FileName { get; set; } public int Length { get; set; } public string Type { get; set; } public bool IsValid { get; set; } public string Message { get; set; } public string FilePath { get; set; } }把上传的文件名改成以时间命名的格式,并保存到文件夹,再把回传信息以json形式传递给视图。关于删除,需要接收来自视图的文件名参数。
#region 上传单个文件 //显示 public ActionResult Index() { return View(); } //接收上传 [HttpPost] public ActionResult UploadFile() { List results = new List(); foreach (string file in Request.Files) { HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase; if (hpf.ContentLength == 0 || hpf == null) { continue; } var fileName = DateTime.Now.ToString("yyyyMMddhhmmss") + hpf.FileName.Substring(hpf.FileName.LastIndexOf('.')); string pathForSaving = Server.MapPath("~/AjaxUpload"); if (this.CreateFolderIfNeeded(pathForSaving)) { hpf.SaveAs(Path.Combine(pathForSaving, fileName)); results.Add(new UploadFileResult() { FilePath = Url.Content(String.Format("~/AjaxUpload/{0}", fileName)), FileName = fileName, IsValid = true, Length = hpf.ContentLength, Message = "上传成功", Type = hpf.ContentType }); } } return Json(new { name = results[0].FileName, type = results[0].Type, size = string.Format("{0} bytes", results[0].Length), path = results[0].FilePath, msg = results[0].Message }); } #region 共用方法 /// /// 检查是否要创建上传文件夹,如果没有就创建 /// /// 路径 /// private bool CreateFolderIfNeeded(string path) { bool result = true; if (!Directory.Exists(path)) { try { Directory.CreateDirectory(path); } catch (Exception) { //TODO:处理异常 result = false; } } return result; } //根据文件名称删除文件 [HttpPost] public ActionResult DeleteFileByName(string name) { string pathForSaving = Server.MapPath("~/AjaxUpload"); System.IO.File.Delete(Path.Combine(pathForSaving, name)); return Json(new { msg = true }); } #endregion Home/Index.cshml
前台视图主要做如下几件事:
- 每次上传之前检查表格中是否有数据,如果有,实施界面删除并同步删除文件夹中的文件
- 上传成功动态创建表格行显示缩略图、文件名和删除按钮
- 点击删除按钮实施界面删除并同步删除文件夹中的文件
由于表格行是动态生成的,需要对删除按钮以"冒泡"的方式注册事件: $('#tb').on("click", ".delImg", function ()
Index
另外:需要删除源js文件中input元素的multiple属性,使之只能接收单个文件。
本篇源码在github
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接
您可能感兴趣的文章:
相关内容
- asp.net core 认证和授权实例详解_实用技巧_
- .NET Core中使用gRPC的方法_实用技巧_
- 如何将asp.net core程序部署到Linux服务器_实用技巧_
- ASP.NET MVC实现单个图片上传、限制图片格式与大小并在服务端裁剪图片_实用技巧_
- .Net中的Http请求调用详解(Post与Get)_实用技巧_
- ASP.NET MVC使用Boostrap实现产品展示、查询、排序、分页_实用技巧_
- .NET使用StackTrace获取方法调用信息的代码演示_实用技巧_
- .Net6.0+Vue3实现数据简易导入功能全过程_实用技巧_
- .Net实现图片裁剪图片缩放及图片加水印详解_ASP.NET_
- .Net Core 配置文件读取IOptions,IOptionsMonitor,IOptionsSnapshot_ASP.NET_
