先看效果：
上传文件显示进度条：
2022911112602371.png
停止上传按钮和关闭缩略图按钮：
2022911112602372.png
限制上传文件的类型：
2022911112602373.png
限制上传文件的尺寸：
2022911112602374.png
上传成功后显示缩略图、文件名以及回传信息：
2022911112602375.png
点击界面上的删除按钮，界面删除，同步删除文件夹中文件。重新上传文件，界面删除，同步删除文件夹中文件，并界面显示新的缩略图、文件名等。
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[U] results = new List[U]();
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
#tb table{
border-collapse: collapse;
width: 600px;
}
#tb td {
text-align: center;
padding-top: 5px;
width: 25%;
}
#tb tr {
background-color: #E3E3E3;
line-height: 35px;
}
.showImg {
width: 50px;
height: 50px;
}
另外：需要删除源js文件中input元素的multiple属性，使之只能接收单个文件。
本篇源码在github
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对知鸟论坛的支持。如果你想了解更多相关内容请查看下面相关链接 |
发表于 2023-5-4 11:34:04