这里有新鲜出炉的精品教程,程序狗速度看过来!
ASP.NET 是. NET FrameWork 的一部分,是一项微软公司的技术,是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术,它可以在通过 HTTP 请求文档时再在 web 服务器上动态创建它们。 指 Active Server Pages(动态服务器页面) ,运行于 IIS(Internet Information Server 服务,是 Windows 开发的 Web 服务器)之中的程序 。
本文主要介绍了 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");
- }
- }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 PHPERZ!
来源: http://www.phperz.com/article/17/0814/337918.html