1.引入js和css文件
<link href="https://www.jb51.net/~/Scripts/uploadify/uploadify.css" /> <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="https://www.jb51.net/~/Scripts/jquery-1.8.2.min.js"></script> <script src="https://www.jb51.net/~/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> <h2>ASP .NET MVC4 多文件文件上传实例</h2> <form> <div> <input type="file" /> </div> <div> <a href="javascript:$('#myfile').uploadify('upload');" >上传第一个</a> <a href="javascript:$('#myfile').uploadify('upload','*');" >上传队列</a> <a href="javascript:$('#myfile').uploadify('cancel');" >取消第一个</a> <a href="javascript:$('#myfile').uploadify('cancel', '*');" >取消队列</a> </div> </form> <div> <div> <h3>文件列表</h3> </div> <div></div> <div> <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><img src='' />" + str + "</p>"); } else if (exStr == ".doc" || exStr == ".docx") { sb.Append("<p><img src='' />" + str + "</p>"); } else if (exStr == ".ppt" || exStr == ".pptx") { sb.Append("<p><img src='' />" + str + "</p>"); } else if (exStr == ".xlsx" || exStr == ".xls" || exStr == ".XLS") { sb.Append("<p><img src='' />" + str + "</p>"); } else if (exStr == ".pdf") { sb.Append("<p><img src='' />" + str + "</p>"); } else if (exStr == ".js" || exStr == ".JS") { sb.Append("<p><img src='' />" + str + "</p>"); } else if (exStr == ".html" || exStr == ".HTML") { sb.Append("<p><img src='' />" + str + "</p>"); } else if (exStr == ".txt" || exStr == ".TXT") { sb.Append("<p><img src='' />" + str + "</p>"); } else if (exStr == ".mp3" || exStr == ".wmv" || exStr == ".aac") { sb.Append("<p><img src='' />" + str + "</p>"); } else if (exStr == ".avi" || exStr == ".mov" || exStr == ".mp4" || exStr == ".ram" || exStr == ".flv") { sb.Append("<p><img src='' />" + str + "</p>"); } else { sb.Append("<p><img src='' />" + 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><img src='' />" + 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"); } }