Layui upload 上傳有進度條

首先需要下載最新的 layui的js layui 有進度條是在 2.5.5的時候添加了進度條的功能，所有在也不用 xhr：function了

1、前台HTML

<link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/layui/layui.all.js"></script>
 
<button type="button" class="layui-btn" id="chooseFile">
    <i class="layui-icon">&#xe67c;</i>選擇文件
</button> 文件名稱: <span id="fileName"></span>
<div style="height: 20px;"></div>
<button type="button" class="layui-btn" id="uploadBtn">
    <i class="layui-icon">&#xe67c;</i>上傳文件
</button>
<div style="height: 20px;"></div>
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">
    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
<script type="text/javascript">


    layui.use(['upload', 'element'], function () {
        var upload = layui.upload,
            element = layui.element;
        element.init();

        upload.render({
            elem: '#chooseFile', // 文件選擇
            accept: 'file',
            url: '/Home/FileUpload',
            auto: false, // 設置不自動提交
            bindAction: '#uploadBtn', // 提交按鈕
            progress: function (e, percent) {
                console.log(JSON.stringify(e));
                console.log("進度：" + e + '%');
                element.progress('progressBar', e + '%');
            },
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $("#fileName").html(file.name);
                });
            },
            done: function (res) {
                layer.msg(res.msg);
            },
            error: function (res) {
                layer.msg(res.msg);
            }
        });

    });
</script>

2、后台方法

public ActionResult FileUpload()
        {
            HttpFileCollection uploadFiles = System.Web.HttpContext.Current.Request.Files;

            //上傳文件保存路徑  
            string savePath = Server.MapPath("/UploadFiles/");
            try
            {
                for (int i = 0; i < uploadFiles.Count; i++)
                {

                    //HttpPostedFile 對已上傳文件進行操作

                    //uploadFiles[i]  逐個獲取上傳文件
                    System.Web.HttpPostedFile postedFile = uploadFiles[i];
                  
                    string fileName = System.IO.Path.GetFileName(postedFile.FileName); //獲取到名稱
                    string fileExtension = System.IO.Path.GetExtension(fileName);//文件的擴展名稱
                    string type = fileName.Substring(fileName.LastIndexOf(".") + 1);    //類型  
                    if (uploadFiles[i].ContentLength > 0)
                        if (!System.IO.Directory.Exists(savePath))
                        {
                            System.IO.Directory.CreateDirectory(savePath);
                        }

                        uploadFiles[i].SaveAs(savePath + fileName);
                }
            }
            catch (System.Exception Ex)
            {
                Response.Write(Ex);
            }

            return Content("");
        }

3、上傳效果