视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
ASP.NET MVC4 利用uploadify.js多文件上传
2020-11-27 22:35:56 责编:小采
文档


页面代码:

1.引入js和css文件

  <link href="~/Scripts/uploadify/uploadify.css" rel="external nofollow" rel="stylesheet" />
 <style type="text/css">
 #upDiv {
 width: 550px;
 height: 400px;
 border: 2px solid red;
 margin-top: 30px;
 margin-left: 50px;
 float: left;
 }
 div form {
 text-align: center;
 vertical-align: middle;
 }
 h2, h3 {
 text-align: center;
 color: #00B2EE;
 }
 #upList {
 width: 900px;
 height: 400px;
 float: left;
 margin-top: 30px;
 margin-left: 50px;
 overflow-y: scroll;
 border: 2px solid red;
 }
 #filelist {
 width: 45%;
 height: 400px;
 float: left;
 }
 #lineDiv {
 width: 50px;
 height: 400px;
 float: left;
 }
 #imglist {
 width: 45%;
 height: 400px;
 float: left;
 }
 #form1 {
 margin-top: 25px;
 }
 img {
 width: 25px;
 height: 25px;
 }
 .btn {
 width: 150px;
 height: 40px;
 text-align: center;
 background-color: #b58061;
 color: white;
 }
 p {
 cursor: pointer;
 }
 </style>
 <script src="~/Scripts/jquery-1.8.2.min.js"></script>
 <script src="~/Scripts/uploadify/jquery.uploadify-3.1.js"></script>
 <script type="text/javascript">
 $(function () {
 $("#myfile").uploadify({
 "auto": false,
 "swf": "../Scripts/uploadify/uploadify.swf",
 "uploader": "../Home/UploadFiles",
 "removeCompleted": false,
 "onUploadSuccess": function (file, data, response) {
 },
 "onQueueComplete": function () {
 window.location.reload();
 }
 });
 $.ajax({
 url: "/home/loadFileInfo",
 datatype: 'html',
 success: function (result) {
 $('#filelist').append(result);
 }
 });
 $.ajax({
 url: "/home/loadImgInfo",
 datatype: 'html',
 success: function (result) {
 $('#imglist').append(result);
 }
 });
 });
 //在线打开文件
 function openFile(doc) {
 try {
 var fileName = $(doc).text();
 var url = window.location.protocol + "//" + window.location.host + "/UploadFile/File/"
 url = url + fileName;
 window.open(url);
 } catch (EventException) {
 alert("此文件无法打开!");
 }
 }
 //在线打开图片
 function openImg(doc) {
 var fileName = $(doc).text();
 var url = window.location.protocol + "//" + window.location.host + "/UploadImg/Img/"
 url = url + fileName;
 window.open(url);
 }
 </script>

2.body内代码

  <body style="background: url(../../Images/bg.jpg) no-repeat; background-size: 1600px; width: 1600px; height: 700px; ">
 <h2 style="text-align:center;">ASP .NET MVC4 多文件文件上传实例</h2>
 <form id="form1">
 <div>
 <input type="file" id="myfile" name="myfile" />
 </div>
 <div>
 <a class="btn" href="javascript:$('#myfile').uploadify('upload');" rel="external nofollow" >上传第一个</a>
 <a class="btn" href="javascript:$('#myfile').uploadify('upload','*');" rel="external nofollow" >上传队列</a>
 <a class="btn" href="javascript:$('#myfile').uploadify('cancel');" rel="external nofollow" >取消第一个</a>
 <a class="btn" href="javascript:$('#myfile').uploadify('cancel', '*');" rel="external nofollow" >取消队列</a>
 </div>
 </form>
 <div id="upList">
 <div id="filelist">
 <h3>文件列表</h3>
 </div>
 <div id="lineDiv"></div>

 <div id="imglist">
 <h3>图片列表</h3>
 </div>
 </div>
</body>

后台代码:

public ActionResult loadFileInfo()
 {
 StringBuilder sb = new StringBuilder();
 DirectoryInfo theFolder = new DirectoryInfo(Server.MapPath("~/UploadFile/"));
 DirectoryInfo[] dirInfo = theFolder.GetDirectories();
 //遍历文件夹
 foreach (DirectoryInfo NextFolder in dirInfo)
 {
 FileInfo[] fileInfo = NextFolder.GetFiles();
 //遍历文件
 foreach (FileInfo NextFile in fileInfo)
 {
 string exStr = NextFile.Extension;
 string str = NextFile.Name;
 if (exStr == ".zip" || exStr == ".7z" || exStr == ".rar" || exStr.ToLower() == ".rars")
 {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/zip.png' width='25' height='25' />" + str + "</p>");
 }
 else if (exStr == ".doc" || exStr == ".docx")
 {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/words.png' width='25' height='25' />" + str + "</p>");
 }
 else if (exStr == ".ppt" || exStr == ".pptx")
 {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/ppt.jpg' width='25' height='25' />" + str + "</p>");
 }
 else if (exStr == ".xlsx" || exStr == ".xls" || exStr == ".XLS")
 {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/excel.png' width='25' height='25' />" + str + "</p>");
 }
 else if (exStr == ".pdf")
 {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/pdf.jpg' width='25' height='25' />" + str + "</p>");
 }
 else if (exStr == ".js" || exStr == ".JS")
 {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/js.png' width='25' height='25' />" + str + "</p>");
 }
 else if (exStr == ".html" || exStr == ".HTML")
 {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/html.png' width='25' height='25' />" + str + "</p>");
 }
 else if (exStr == ".txt" || exStr == ".TXT")
 {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/txt.png' width='25' height='25' />" + str + "</p>");
 }
 else if (exStr == ".mp3" || exStr == ".wmv" || exStr == ".aac")
 {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/mp3.png' width='25' height='25' />" + str + "</p>");
 }
 else if (exStr == ".avi" || exStr == ".mov" || exStr == ".mp4" || exStr == ".ram" || exStr == ".flv")
 {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/video.png' width='25' height='25' />" + str + "</p>");
 }
 else {
 sb.Append("<p onclick='openFile(this)'><img src='../../Images/file.jpg' width='25' height='25' />" + str + "</p>");
 }
 }
 }
 return Content(sb.ToString());
 }
 public ActionResult loadImgInfo()
 {
 StringBuilder sb = new StringBuilder();
 DirectoryInfo theFolder = new DirectoryInfo(Server.MapPath("~/UploadImg/"));
 DirectoryInfo[] dirInfo = theFolder.GetDirectories();
 //遍历文件夹
 foreach (DirectoryInfo NextFolder in dirInfo)
 {
 FileInfo[] fileInfo = NextFolder.GetFiles();
 //遍历文件
 foreach (FileInfo NextFile in fileInfo)
 {
 string str = NextFile.Name;
 sb.Append("<p onclick='openImg(this)'><img src='../../Images/img.png' width='25' height='25' />" + str + "</p>");
 }
 }
 return Content(sb.ToString());
 }
 public ActionResult UploadFile()
 {
 string filepath = "";
 bool fileOK = false;
 //判断是否已经选择上传文件
 HttpPostedFileBase file = Request.Files["myfile"];
 if (file != null && file.ContentLength > 0)
 {
 String fileExtension = System.IO.Path.GetExtension(file.FileName).ToLower();
 //判断是否为图片类型
 String[] allowedExtensions = { ".gif", ".png", ".bmp", ".jpg" };
 for (int i = 0; i < allowedExtensions.Length; i++)
 {
 if (fileExtension == allowedExtensions[i])
 {
 fileOK = true;
 }
 }
 if (fileOK)
 {
 //设置上传目录
 string path = Server.MapPath("~/UploadImg/Img/");
 if (!Directory.Exists(path))
 Directory.CreateDirectory(path);
 string filenNamer = file.FileName;
 //文件路径
 filepath = path + filenNamer;
 file.SaveAs(filepath);
 return RedirectToAction("Upload", "Home");
 }
 else
 {
 //设置上传目录
 string path = Server.MapPath("~/UploadFile/File/");
 if (!Directory.Exists(path))
 Directory.CreateDirectory(path);
 //不为图片类型的文件存入到File目录中
 string filenNamer = file.FileName;
 //文件路径
 filepath = path + filenNamer;
 file.SaveAs(filepath);
 return RedirectToAction("Upload", "Home"); 
 }
 }
 else
 {
 var script = String.Format("<script>alert('请选择文件后再上传!');location.href='{0}'</script>", Url.Action("Upload"));
 return Content(script, "text/html");
 }
 }

下载本文
显示全文
专题