首先需要下载最新的 layui的js layui 有进度条是在 2.5.5的时候添加了进度条的功能，所有在也不用 xhr：function了
1、前台HTML 选择文件 文件名称: 上传文件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);}});});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、上传效果