[实战]MVC5+EF6+MySql企业网盘实战(18)——文件上传,下载,修改
写在前面
经过一段时间的秀秀改改,终于把文件上传下载,修改文件夹文件名称的功能实现了。
系列文章
[EF]vs15+ef6+mysql code first方式
[实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册
[实战]MVC5+EF6+MySql企业网盘实战(3)——验证码
[实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像
[实战]MVC5+EF6+MySql企业网盘实战(5)——登录界面,头像等比例压缩
[实战]MVC5+EF6+MySql企业网盘实战(5)——页面模板
[实战]MVC5+EF6+MySql企业网盘实战(5)——ajax方式注册
[实战]MVC5+EF6+MySql企业网盘实战(6)——ajax方式登录
[实战]MVC5+EF6+MySql企业网盘实战(7)——文件上传
[实战]MVC5+EF6+MySql企业网盘实战(8)——文件下载、删除
[实战]MVC5+EF6+MySql企业网盘实战(9)——编辑文件名
[实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹
[实战]MVC5+EF6+MySql企业网盘实战(11)——新建文件夹2
[实战]MVC5+EF6+MySql企业网盘实战(12)——新建文件夹和上传文件
[实战]MVC5+EF6+MySql企业网盘实战(13)——编辑文件夹
[实战]MVC5+EF6+MySql企业网盘实战(14)——逻辑重构
[实战]MVC5+EF6+MySql企业网盘实战(14)——思考
[实战]MVC5+EF6+MySql企业网盘实战(15)——逻辑重构2
[实战]MVC5+EF6+MySql企业网盘实战(16)——逻辑重构3
[实战]MVC5+EF6+MySql企业网盘实战(17)——思考2
[实战]MVC5+EF6+MySql企业网盘实战(18)——文件上传,下载,修改
实现逻辑
按照上篇文章的思路,对代码进行了修改,发现这种方式更简单一点。每次修改文件夹的名称,不需要再去考虑修改文件夹名称导致文件路径的问题,直接修改文件夹名称即可。
public class HomeController : Controller { private IUserInfoServiceRepository _userInfoServiceRepository = new UserInfoServiceRepository(); private IMyFileServiceRepository _myFileServiceRepository = new MyFileServiceRepository(); private ILogServiceRepository _logServiceRepository = new LogServiceRepository(); [HttpGet] public ActionResult FileList(int? id) { UserInfo userInfo = Session["user"] as UserInfo; if (userInfo == null) { return RedirectToAction("Login", "UserInfo"); } Expression<Func<MyFile, bool>> where = null; //不存在则创建 var user = _userInfoServiceRepository.Find(x => x.Id == userInfo.Id); var rootFolder = _myFileServiceRepository.Find(x => x.User.Id == userInfo.Id && x.IsFolder == true && x.ParentId == 0); if (rootFolder == null) { rootFolder = _myFileServiceRepository.Add(new MyFile() { IsDelete = false, Name = "NetDisk", ParentId = 0, IsFolder = true, FileExt = string.Empty, FileIcon = "/Content/Images/FolderType.png", ModifyDt = DateTime.Now, FileMd5 = string.Empty, FileSize = 0, CreateDt = DateTime.Now, User = user }); _myFileServiceRepository.SaveChanges(); } if (id == null || id == 0) { where = x => x.User.Id == userInfo.Id && x.ParentId == rootFolder.Id && x.IsDelete == false; } else { where = x => x.User.Id == userInfo.Id && x.ParentId == id && x.IsDelete == false; } var fileList = _myFileServiceRepository.FindAll(where).OrderByDescending(x => x.IsFolder); ViewBag.UserInfo = userInfo; ViewBag.ChildTitle = "我的网盘"; ViewBag.Id = id; _logServiceRepository.Add(new Log() { Message = "网盘首页", Level = LogLevel.INFO, UserName = userInfo.UserName, Opt = "网盘首页" }); _logServiceRepository.SaveChanges(); return View(fileList); } [HttpPost] public void UploadFile(int? id) { UserInfo userInfo = Session["user"] as UserInfo; //保证路径格式一直以/结束 if (userInfo == null) { RedirectToAction("Login", "UserInfo"); } int iParentId = Convert.ToInt32(id); Expression<Func<MyFile, bool>> findWhere = null; if (id == null || id == 0) { findWhere = x => x.ParentId == iParentId && x.User.Id == userInfo.Id && x.IsFolder == true; } else { findWhere = x => x.Id == iParentId && x.User.Id == userInfo.Id && x.IsFolder == true; } var fatherFolder = _myFileServiceRepository.Find(findWhere); var files = Request.Files; MyFile myFile = null; if (files.Count > 0) { var file = files[0]; string fileName = file.FileName; Stream inputStream = file.InputStream; string fileSaveFolder = Server.MapPath("~/NetDisk"); //如果目标不存在,则创建 if (!Directory.Exists(fileSaveFolder)) { Directory.CreateDirectory(fileSaveFolder); } byte[] buffer = new byte[inputStream.Length]; //判断是否已经超出个人网盘大小 var myFiles = _myFileServiceRepository.FindAll(x => x.User.Id == userInfo.Id && x.IsDelete == false); int myDiskSize = 0; if (myFiles.Count() > 0) { myDiskSize = myFiles.Sum(x => x.FileSize); } //如果已经超出网盘大小,则给出提示 if (myDiskSize + buffer.Length > userInfo.NetDiskSize) { AlertMsg("对不起,您的网盘空间不足,请清理后再次上传,或联系管理员进行扩容。", ""); return; } inputStream.Read(buffer, 0, buffer.Length); string strFileMd5 = MD5Helper.GetMD5FromFile(buffer); //名称格式一律以md5命名。 string strNewName = strFileMd5 + Path.GetExtension(file.FileName); string fileSavePath = Path.Combine(fileSaveFolder, strNewName); //如果文件不存在,则保存物理文件。 if (!System.IO.File.Exists(fileSavePath)) { file.SaveAs(fileSavePath); } //判断在数据库中同一路径下,md5相同的文件是否存在,不存在则直接插入,否则判断在当前用户的网盘中该文件的个数,进行自动重命名保存。 var fileIsExistList = _myFileServiceRepository.FindAll(x => x.FileMd5 == strFileMd5 && x.ParentId == fatherFolder.Id); //如果找到的文件对象不为空,并且是删除状态,则修改删除状态,不再新增文件信息,否则添加。 //查询导航属性 var currentUser = _userInfoServiceRepository.Find(x => x.Id == userInfo.Id); if (fileIsExistList.Count() > 0) { myFile = fileIsExistList.FirstOrDefault(); //文件被逻辑删除了,则更新状态,将该文件的信息赋值给当前的用户,否则重命名后新增文件。 myFile.IsDelete = false; myFile.User = currentUser; myFile.ParentId = fatherFolder == null ? iParentId : fatherFolder.Id; if (myFile.IsDelete) { _myFileServiceRepository.Update(myFile); } else { //查找该用户下类似文件名的文件并且没有被逻辑删除的个数 fileName = fileName.Substring(0, fileName.LastIndexOf('.')); iParentId = fatherFolder == null ? iParentId : fatherFolder.Id; var count = fileIsExistList.Where(x => x.User.Id == userInfo.Id && x.IsDelete == false && x.Name.Contains(fileName) && x.ParentId == iParentId).Count(); fileName = count > 0 ? Path.GetFileNameWithoutExtension(fileName) + "(" + (count + 1).ToString() + ")" + Path.GetExtension(fileName) : fileName; myFile.Name = fileName; //保存数据库 _myFileServiceRepository.Add(myFile); } } else { //新增文件信息 myFile = new MyFile() { FileMd5 = strFileMd5, ModifyDt = DateTime.Now, IsDelete = false, FileSize = buffer.Length, ParentId = fatherFolder == null ? iParentId : fatherFolder.Id, FileExt = Path.GetExtension(fileSavePath), CreateDt = DateTime.Now, Name = fileName, FileIcon = GetFileIcon(Path.GetExtension(fileSavePath)), User = currentUser, IsFolder = false }; //保存数据库 _myFileServiceRepository.Add(myFile); } _logServiceRepository.Add(new Log() { Message = "上传" + myFile.Name, Level = LogLevel.INFO, UserName = userInfo.UserName, Opt = "上传" + myFile.Name }); _logServiceRepository.SaveChanges(); _myFileServiceRepository.SaveChanges(); string json = new JavaScriptSerializer().Serialize(myFile); AlertMsg("上传成功", json); } } private void AlertMsg(string msg, string fileJson) { Response.ContentType = "text/html"; Response.Write("<script>parent.showMsg('" + msg + "','" + fileJson + "');</script>"); Response.End(); } private string GetFileIcon(string fileExt) { string fileIconPath = "/Content/Images/"; switch (fileExt.ToLower()) { case ".doc": case ".docx": fileIconPath += "DocType.png"; break; case ".xlx": case ".xlxs": fileIconPath += "XlsType.png"; break; case ".ppt": case ".pptx": fileIconPath += "PptType.png"; break; case ".pdf": fileIconPath += "PdfType.png"; break; case ".apk": fileIconPath += "ApkType.png"; break; case ".dwt": case ".dwg": case ".dws": case ".dxf": fileIconPath += "CADType.png"; break; case ".exe": fileIconPath += "ExeType.png"; break; case ".png": case ".gif": case ".jpg": fileIconPath += "ImgType.png"; break; case ".txt": fileIconPath += "TxtType.png"; break; case ".bt": fileIconPath += "TorrentType.png"; break; case ".rmvb": case ".avi": case ".flv": fileIconPath += "VideoType.png"; break; case ".zip": case ".7z": case ".rar": fileIconPath += "RarType.png"; break; case ".mp3": fileIconPath += "MusicType.png"; break; default: fileIconPath += "OtherType.png"; break; } return fileIconPath; } /// <summary> /// 文件下载 /// </summary> /// <param name="fileId"></param> public void DownLoadFile(string fileId) { UserInfo userInfo = Session["user"] as UserInfo; if (userInfo == null) { RedirectToAction("Login", "UserInfo"); return; } if (string.IsNullOrEmpty(fileId)) { throw new ArgumentNullException("fileId is errror"); } int id = Convert.ToInt32(fileId); var findFile = _myFileServiceRepository.Find(x => x.Id == id); if (findFile == null) { AlertMsg("文件不存在", ""); return; } _logServiceRepository.Add(new Log() { Message = "下载" + findFile.Name, Level = LogLevel.INFO, UserName = userInfo.UserName, Opt = "下载" + findFile.Name }); _logServiceRepository.SaveChanges(); string filePath = Path.Combine(Server.MapPath("~/NetDisk/"), findFile.FileMd5 + findFile.FileExt); //以字符流的形式下载文件 FileStream fs = new FileStream(filePath, FileMode.Open); byte[] bytes = new byte[(int)fs.Length]; fs.Read(bytes, 0, bytes.Length); fs.Close(); Response.ContentType = "application/octet-stream"; //通知浏览器下载文件而不是打开 Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(findFile.Name, System.Text.Encoding.UTF8)); Response.BinaryWrite(bytes); Response.Flush(); Response.End(); } public void DeleteFile(string fileId) { UserInfo userInfo = Session["user"] as UserInfo; if (userInfo == null) { RedirectToAction("Login", "UserInfo"); return; } if (string.IsNullOrEmpty(fileId)) { throw new ArgumentNullException("fileId is errror"); } int id = Convert.ToInt32(fileId); var findFile = _myFileServiceRepository.Find(x => x.Id == id); if (findFile == null) { AlertMsg("文件不存在", ""); return; } _logServiceRepository.Add(new Log() { Message = "删除" + findFile.Name, Level = LogLevel.INFO, UserName = userInfo.UserName, Opt = "删除" + findFile.Name }); _logServiceRepository.SaveChanges(); findFile.IsDelete = true; _myFileServiceRepository.Update(findFile); int count = _myFileServiceRepository.SaveChanges(); if (count > 0) { var response = new { code = 4, fileId = findFile.Id }; Response.Write(new JavaScriptSerializer().Serialize(response)); } } public JsonResult EditFileName() { string fileId = Request.Form["fileId"]; string fileNewName = Request.Form["fileNewName"]; UserInfo userInfo = Session["user"] as UserInfo; if (userInfo == null) { RedirectToAction("Login", "UserInfo"); } int id = Convert.ToInt32(fileId); var findFile = _myFileServiceRepository.Find(x => x.Id == id); findFile.Name = fileNewName; _myFileServiceRepository.Update(findFile); int count = _myFileServiceRepository.SaveChanges(); if (count > 0) { var response = new { code = 200, msg = "更新成功" }; return new JsonResult() { Data = new JavaScriptSerializer().Serialize(response) }; } _logServiceRepository.Add(new Log() { Message = "修改" + findFile.Name, Level = LogLevel.INFO, UserName = userInfo.UserName, Opt = "修改" + findFile.Name }); _logServiceRepository.SaveChanges(); return new JsonResult() { Data = new JavaScriptSerializer().Serialize(new { code = 500, msg = "保存失败" }) }; } public JsonResult CreateFolder(int? id) { UserInfo userInfo = Session["user"] as UserInfo; if (userInfo == null) { RedirectToAction("Login", "UserInfo"); } int parentId = Convert.ToInt32(id); string folderName = Request.Params["folderName"]; if (string.IsNullOrEmpty(folderName)) { throw new ArgumentNullException("文件夹名称不能为空"); } var fatherFolder = _myFileServiceRepository.Find(x => x.User.Id == userInfo.Id && x.IsFolder == true && x.ParentId == parentId); parentId = fatherFolder == null ? parentId : fatherFolder.Id; var count = _myFileServiceRepository.FindAll(x => x.IsFolder == true && x.IsDelete == false && x.User.Id == userInfo.Id && x.Name.Contains(folderName) && x.ParentId == parentId).Count(); userInfo = _userInfoServiceRepository.Find(x => x.Id == userInfo.Id); if (count > 0) { //如果不存在,则新建,否则进行自动重命名 folderName = folderName + "(" + (count + 1).ToString() + ")"; } MyFile folder = new MyFile() { Name = folderName, CreateDt = DateTime.Now, User = userInfo, FileExt = string.Empty, FileIcon = "/Content/Images/FolderType.png", FileMd5 = string.Empty, FileSize = 0, IsDelete = false, ModifyDt = DateTime.Now, IsFolder = true, ParentId = fatherFolder == null ? parentId : fatherFolder.Id }; try { _myFileServiceRepository.Add(folder); _myFileServiceRepository.SaveChanges(); _logServiceRepository.Add(new Log() { Message = "创建文件夹" + folder.Name, Level = LogLevel.INFO, UserName = userInfo.UserName, Opt = "创建文件夹" + folder.Name }); _logServiceRepository.SaveChanges(); } catch (Exception) { return new JsonResult() { Data = new JavaScriptSerializer().Serialize(new { code = 500, msg = "创建失败" }) }; } return new JsonResult() { Data = new JavaScriptSerializer().Serialize(new { code = 200, folder = folder }) }; } public JsonResult EditFolder() { UserInfo userInfo = Session["user"] as UserInfo; if (userInfo == null) { RedirectToAction("Login", "UserInfo"); } string strId = Request.Params["fileId"]; string strNewFolderName = Request.Params["fileNewName"]; JavaScriptSerializer jss = new JavaScriptSerializer(); if (string.IsNullOrEmpty(strId)) { return new JsonResult() { Data = jss.Serialize(new { code = 500, msg = "请选择要编辑的文件夹" }) }; } if (string.IsNullOrEmpty(strNewFolderName)) { return new JsonResult() { Data = jss.Serialize(new { code = 500, msg = "文件夹名称不能为空" }) }; } int folderId = Convert.ToInt32(strId); var findFolder = _myFileServiceRepository.Find(x => x.Id == folderId && x.User.Id == userInfo.Id && x.IsDelete == false); if (findFolder != null) { string strOldFolderName = findFolder.Name + "/"; //找到所有的目录,以 findFolder.FileName 结尾的目录,并修改 var folders = new List<MyFile>();//_myFileServiceRepository.FindAll(x => x.User.Id == userInfo.Id && x.FolderPath.EndsWith(strOldFolderName) && x.IsDelete == false); foreach (var item in folders) { _myFileServiceRepository.Update(item); } findFolder.Name = strNewFolderName; _myFileServiceRepository.Update(findFolder); _myFileServiceRepository.SaveChanges(); _logServiceRepository.Add(new Log() { Message = "修改文件夹" + findFolder.Name, Level = LogLevel.INFO, UserName = userInfo.UserName, Opt = "修改文件夹" + findFolder.Name }); _logServiceRepository.SaveChanges(); } return new JsonResult() { Data = jss.Serialize(new { code = 200, msg = "修改成功" }) }; } }
View
@model IEnumerable<Wolfy.NetDisk.Model.MyFile> @{ ViewBag.Title = "FileList"; Layout = "~/Views/Shared/_Layout.cshtml"; } <button id="btnUpload" class="btn-primary">上传文件</button> <button class="btn-primary" id="btnNewFolder">新建文件夹</button> <div class="box-content" id="fileList"> <div class="dataTables_wrapper" role="grid"> <table id="fileList" class="table table-striped table-bordered responsive" aria-describedby="DataTables_Table_0_info"> <thead> <tr role="row"> <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Username: activate to sort column descending" style="width: 312px;">文件名</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Role: activate to sort column ascending" style="width: 144px;">大小</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Date registered: activate to sort column ascending" style="width: 263px;">修改日期</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Actions: activate to sort column ascending" style="width: 549px;">操作</th> </tr> </thead> <tbody role="alert" aria-live="polite" aria-relevant="all"> @{int i = 0;} @foreach (var item in Model) { i++; <tr class="i%2==0?'even':'odd'" id="tr-@item.Id"> @{ if (!@item.IsFolder) { <td class=" even sorting_1"><img src="@item.FileIcon" alt="" /> <span id="sp-@item.Id">@item.Name</span></td> <td class="center ">@item.FileSize 字节</td> } else { <td class=" even sorting_1"> <a href="/Home/FileList/@item.Id"> <img src="@item.FileIcon" alt="@item.Name" /> <span id="sp-@item.Id">@item.Name</span> </a> </td> <td class="center "></td> } } <td class="center ">@item.ModifyDt</td> <td class="center "> <a class="btn btn-info" href="javascript:void(0)" onclick="editFile(@item.Id,'@item.Name','@item.IsFolder')"> <i class="glyphicon glyphicon-edit icon-white"></i> 编辑 </a> <a class="btn btn-danger" href="javascript:void(0)" onclick="deleteFile(@item.Id)"> <i class="glyphicon glyphicon-trash icon-white"></i> 删除 </a> @{ if (@item.FileMd5 != "") { <a class="btn btn-success" href="/Home/DownLoadFile?fileId=@item.Id"> <i class="glyphicon glyphicon-zoom-in icon-white"></i> 下载 </a> } } </td> </tr> } </tbody> </table> </div> </div> <div class="modal fade" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3 id="alertTitlte">编辑</h3> </div> <div class="modal-body"> </div> <div class="modal-footer"> <a href="#" class="btn btn-default" data-dismiss="modal" id="lnkCancel">取消</a> <a href="#" class="btn btn-primary" data-dismiss="modal" id="lnkSave">保存</a> </div> </div> </div> </div> <form action="/Home/UploadFile/@ViewBag.Id" id="fileForm" method="post" enctype="multipart/form-data" target="fileFrame"> <input type="file" accept="*/*" style="display:none" id="btnFile" name="fileData" /> <input type="hidden" id="hdcallbackInfo" name="name" value="" /> </form> <iframe style="display:none" name="fileFrame" id="fileFrame"></iframe> <script> function CurentTime() { var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate(); //日 var hh = now.getHours(); //时 var mm = now.getMinutes(); //分 var clock = year + "-"; if (month < 10) clock += "0"; clock += month + "-"; if (day < 10) clock += "0"; clock += day + " "; if (hh < 10) clock += "0"; clock += hh + ":"; if (mm < 10) clock += '0'; clock += mm; return (clock); }; //上传成功后,单击确定,更新刚刚拼接文件信息 function showMsg(msg, callbackInfo) { if (msg) { $(".modal-body").html(msg); //回调信息 $("#hdcallbackInfo").val(callbackInfo); console.log(callbackInfo); //为确定按钮注册单击事件,确定后更新拼接在列表上的文件信息 $('#fileListSure').bind('click', function () { //var fileInfo = $("#hdcallbackInfo").val(); //console.log(fileInfo); //fileInfo = JSON.parse(fileInfo); //$("#fileDownLoad").attr("href", "/Home/DownLoadFile?fileId=" + fileInfo.Id); //$("#fileName").html('<img src="' + fileInfo.FileIcon + '" id="fileicon" alt="" />' + fileInfo.FileName + ''); window.location.reload(); }); $("#myModal").modal("show"); }; }; //创建文件夹 $('#btnNewFolder').click(function () { //设置弹出框标题 var title = $('#alertTitlte').html(); //从url中获取当前目录 var url = window.location.href; console.log(url); if (url.indexOf('path') > 1) { $('#hdFilePath').val(url.split('=')[1]); }; $('#alertTitlte').html('新建文件夹'); //清空弹出框内容 $(".modal-body").html(''); $(".modal-body").html('<input type="text" placeholder="请输入名称" class="form-control" name="name" value="新建文件夹" id="txtFileName" />'); $('#txtFileName').val(''); $('#modal-edit').modal('show'); $('#txtFileName').val('新建文件夹'); $('#lnkSave').unbind('click'); $('#lnkSave').bind('click', function () { $.post('/Home/CreateFolder', { folderName: $('#txtFileName').val(), id:@ViewBag.id }, function (data) { data = JSON.parse(data); var folder = data.folder; if (data.code == 200) { //$('<tr class="odd"> <td class=" even sorting_1" id="fileName"> <a href="#" id="lnkFolder-' + folder.Id + '" onclick="clickFolder(sp-' + folder.Id + ')"><img src="/Content/Images/FolderType.png" id="fileicon" alt="" />' + folder.FileName + '</a></td><td class="center"></td><td class="center ">' + CurentTime() + '</td><td class="center "><a class="btn btn-info" href="#" id="fileEdit"> <i class="glyphicon glyphicon-edit icon-white"></i> 编辑 </a><a class="btn btn-danger" href="#"><i class="glyphicon glyphicon-trash icon-white" id="fileDelete"></i> 删除 </a> </td></tr>').insertBefore($('#fileList tbody')); window.location.reload(); }; //还原弹出框标题 $('#alertTitlte').html(title); }); }); }); //编辑文件名 function editFile(fileId, fileName,isFolder) { $(".modal-body").html(''); $(".modal-body").html('<input type="text" placeholder="请输入名称" class="form-control" name="name" value="' + fileName + '" id="txtFileName" />'); $("#modal-edit").modal('show'); //弹出框注册取消,保存事件 $('#lnkCancel').click(function () { //单机取消,清空内容 $("#txtFileName").val(''); }); //首先移除已经绑定的单机事件 $('#lnkSave').unbind('click'); $('#lnkSave').bind('click', function () { var file = { fileId: fileId, fileNewName: $('#txtFileName').val() }; var url=isFolder==1?'/Home/EditFolder':'/Home/EditFileName'; $.post(url, file, function (data) { data = JSON.parse(data); if (data.code == 200) { $('#sp-' + fileId).html(file.fileNewName); }else { alert(data.msg); } }); }); }; function deleteFile(fileId) { console.log(fileId); $.getJSON("/Home/DeleteFile?fileId=" + fileId, function (data) { console.log(data.code); if (data.code == 4) { $("#tr-" + fileId).remove(); }; }); }; $('#btnUpload').click(function () { //从url中获取当前目录 var url = window.location.href; console.log(url); $("#btnFile").click(); }); $("#btnFile").change(function () { var files = this.files; for (var i = 0; i < files.length; i++) { var file = files[i]; console.log(file); //$('<tr class="odd"> <td class=" even sorting_1" id="fileName"><img src="/Content/Images/othertype.png" id="fileicon" alt="" />' + file.name + '</td><td class="center">' + file.size + ' 字节</td><td class="center ">' + CurentTime() + '</td><td class="center "><a class="btn btn-info" href="#" id="fileEdit" > <i class="glyphicon glyphicon-edit icon-white"></i> 编辑 </a><a class="btn btn-danger" href="#"><i class="glyphicon glyphicon-trash icon-white" id="fileDelete"></i> 删除 </a> <a class="btn btn-success" href="#" id="fileDownLoad"><i class="glyphicon glyphicon-zoom-in icon-white"></i> 下载 </a></td></tr>').appendTo($('#fileList tbody')); }; $('#fileForm').submit(); }); </script>
总结
网盘的样子已经有了,下一步实现文件列表的分页实现。
-
博客地址:http://www.cnblogs.com/wolf-sun/
博客版权:如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。