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

2018-06-22 07:46:19来源：未知阅读 ()

页面代码：

　　1.引入js和css文件

　　<link href="~/Scripts/uploadify/uploadify.css" 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');">上传第一个</a>
            <a class="btn" href="javascript:$('#myfile').uploadify('upload','*');">上传队列</a>
            <a class="btn" href="javascript:$('#myfile').uploadify('cancel');">取消第一个</a>
            <a class="btn" href="javascript:$('#myfile').uploadify('cancel', '*');">取消队列</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");
            }

        }