ASP.NET MVC4 利用uploadify.js多文件上传

2024-07-10 13:32:11

字体：大中小

来源：转载

供稿：网友

页面代码：

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");   }  }

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持VeVb武林网！

注：相关教程知识阅读请移步到ASP.NET教程频道。

上一篇：WPF实现slide控件拖动完成后改变变量值

下一篇：asp.net利用反射实现给model类赋值的方法