您的当前位置：首页 ASP.NET MVC4 利用uploadify.js多文件上传

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

来源：软文情感网

页面代码：

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