js上传多文件，并显示下载

丿小白丿

已于 2022-11-28 14:19:11 修改

阅读量653

点赞数 1

分类专栏： C# 文章标签： javascript c#

于 2021-11-25 15:16:18 首次发布

本文链接：https://blog.csdn.net/weixin_50655808/article/details/121538271

版权

C# 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端页面

<body>
    <label>多文件上传框</label><br>
    <input type="file" id="file" multiple><br>
    <button id="but">点击提交</button>
       <div id="QWER"></div>
</body>

引用js

<script src="~/jquery-3.3.1.min.js"></script>

JS部分

第一种:

<script>
    $(function () {
        $("#but").click(function () {
            var formData = new FormData();
            var aa = $("#file")[0].files.length;
            var aaa = $("#file")[0];
            for (var i = 0; i < aa; i++) {
                formData.append("file[" + i + "]", aaa.files[i]);
            }
            var xhr = new XMLHttpRequest();
            xhr.open('POST', "/Home/FileUpload");
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var result = JSON.parse(xhr.response);
                    if (result.code == 200) {
                        var RESULT1 = result.src.split('|')
                        console.log(RESULT1)
                        for (var i in RESULT1) {
                            var RESULT2 = "<a href=\"" + RESULT1[i] + "\">" + RESULT1[i].split('/')[7] + "</a><br/>";
                            $("#QWER").append(RESULT2)
                        }
                     

                    }
                }
            };
            xhr.send(formData);
            file.remove();

        })
    })
</script>

第二种:

 $("#but").click(function () {
            var formData = new FormData();
            var aa = $("#file")[0].files.length;
            var aaa = $("#file")[0];
            for (var i = 0; i < aa; i++) {
                formData.append("file[" + i + "]", aaa.files[i]);
            }
            $.ajax({
                url: '@Url.Action("Moban1", "Home")',
                type: "POST",
                cache: false,
                processData: false,
                contentType: false,
                data: formData,
                success: function (datee) {
                    if (datee.code==200) {
                        console.log(datee)
                        var RESULT1 = datee.src.split('|')
                        for (var i in RESULT1) {
                            var RESULT2 = "<a href=\"" + RESULT1[i] + "\">" + RESULT1[i].split('/')[7] + "</a><br/>";
                            $("#QWER").append(RESULT2)
                        }
                    }
                }
               
            })
        })

后端

引用

using System.IO;

    /// <summary>
        /// 展示页面
        /// </summary>
        /// <returns></returns>
        public ActionResult Http()
        {
            return View();
        }
        /// <summary>
        /// 文件处理
        /// </summary>
        /// <param name="ceshi"></param>
        /// <returns></returns>
        public ActionResult FileUpload(HttpPostedFileBase ceshi)
        {
            if (Request.Files.Count > 0)
            {
                try
                {
                    string SRC = "";
                    string FileName = "";
                    for ( int i = 0; i < Request.Files.Count; i++)
                    {
                        HttpPostedFileBase file = Request.Files[i];
                        string extension = Path.GetExtension(file.FileName);
                        string fileName = Path.GetFileName(file.FileName);
                        file.InputStream.Position = 0;
                        var aPath = DateTime.Now.ToString("yyyy/MM/dd") + "/" + DateTime.Now.ToString("yyyyMMddHHmm") + "  " + fileName;
                        var excelUploadPath = "~/Files/Upload/file/" + aPath;
                        //如果文件夹不存在，创建一个文件夹
                        if (!Directory.Exists(Path.GetDirectoryName(Server.MapPath(excelUploadPath))))
                        {
                            Directory.CreateDirectory(Path.GetDirectoryName(Server.MapPath(excelUploadPath)));
                        }
                        //第一种
                        using (FileStream fs = new FileStream(Server.MapPath(excelUploadPath), FileMode.Create, FileAccess.Write))
                        {
                            file.InputStream.CopyTo(fs);
                            fs.Close();
                        }
                        //第二种:另外一种文件写入方法
                           //FileStream fs = new FileStream(Server.MapPath(excelUploadPath), FileMode.Create, FileAccess.Write);
                           //file.InputStream.CopyTo(fs);
                          //fs.Dispose();
                          //fs.Close();
                        SRC = SRC + "/Files/Upload/file/" + aPath + "|";
                        FileName = FileName + DateTime.Now.ToString("yyyyMMdHHmm") + " " + fileName + "|";
                    }
                    return Json(new { code = 200, src = SRC.Substring(0, SRC.Length - 1), fileName = FileName.Substring(0, FileName.Length - 1) });
                }
                catch (Exception ex)
                {
                    return Json(new { code = 500, msg = ex.Message });
                }
            }
            else
            {
                return Json(new { code = 500, msg = "请选择要上传的文件" });
            }
        }

结果图

丿小白丿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js上传多文件，并显示下载

前端页面<body> <label>多文件上传框</label><br> <input type="file" id="file" multiple><br> <button id="but">点击提交</button></body>引用js<script src="~/jquery-3.3.1.min.js"></script>.
复制链接

扫一扫