基于Layui +net. mvc文件上传进度条

html

    <div>
        <table width="100%">
            <tr>
                <th>附件上传</th>
                <td>
                    <button type="button" class="layui-btn layui-btn-green layui-btn-sm" lay-filter="uploadBtn" id="uploadBtn">附件上传</button>
                    <input type="hidden" id="fileInput" readonly />
                </td>
            </tr>
            <tr>
                <td colspan="2" id="fileList"></td>
            </tr>
        </table>
    </div>

js

/*文件上传方法*/
layui.use('upload', function () {
    var $ = layui.jquery
        , element = layui.element
        , upload = layui.upload
        , form = layui.form;
    upload.render({
        elem: '#uploadBtn'
        , url: '/tools/upload'
        , multiple: true
        , accept: 'file'
        //, exts: 'zip|rar|7z|doc|docx|ppt|pptx|txt|pdf|xls|xlsx'
        , before: function (obj) {/*上传前执行的部分*/
            var progressBar = '<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo" style="display:inline-block;width:80px;margin-top:31px;">'
            progressBar += '<div class="layui-progress-bar" lay-percent="0%"></div></div>'
            $("#divEdit #fileList").append(progressBar);
        }
        , progress: function (value) {//上传进度回调 value进度值
            element.progress('demo', value + '%')//设置页面进度条
            element.init();
        }
        , done: function (res) {
            /*上传后执行的部分*/
            var str = [];
            if ($("#divEdit #fileInput").val() != "")
                str = JSON.parse($("#divEdit #fileInput").val());

            str.push({
                附件名称: res.data.filename
                , 附件地址: res.data.newname
            });
            $("#divEdit #fileInput").val(JSON.stringify(str));
            loadFileList();
        }
        , allDone: function (res) {/*全部文件上传完毕执行该方法*/ }
    });
});

function loadFileList() {
    var fileStr = "";
    if ($("#divEdit #fileInput").val() != "") {
        var obj = JSON.parse($("#divEdit #fileInput").val());
        for (var i = 0; i < obj.length; i++) {
            fileStr += '&nbsp;<div class="layui-input-inline" style="text-align:center;">';
            fileStr += '<div class="delfile"><img src="/Content/images/delfile.jpg"   width="40" onClick="delImg(\'' + obj[i].附件地址 + '\');" /></div>';
            fileStr += '<div class="filename"><a href="/upload/' + obj[i].附件地址 + '" title=' + obj[i].附件名称 + ' target="_blank">' + (obj[i].附件名称.length > 3 ? obj[i].附件名称.substring(0, 3) + "..." : obj[i].附件名称) + '</a></div>';
            fileStr += '</div>';
        };
    };
    $("#divEdit #fileList").html(fileStr);
}

Controller

        /// <summary>
        /// 文件上传方法
        /// </summary>
        /// <param name="fc"></param>
        /// <returns></returns>
        public string upload(FormCollection fc)
        {
            try
            {
                string guid = Guid.NewGuid().ToString();
                var file = Request.Files[0];
                if (file == null ||
                  String.IsNullOrEmpty(file.FileName) ||
                  file.ContentLength == 0)
                {
                    return "{\"code\":1,\"msg\":\"文件上传失败！\" ,\"data\":{\"src\":\"\"}}";
                }

                string filename = System.IO.Path.GetFileName(file.FileName);
                string newName = Common.buildFileName(guid, filename);
                string virtualPath = String.Format("/upload/{0}", newName);

                string path = Server.MapPath(virtualPath);
                file.SaveAs(path);                

                return "{\"code\":0,\"msg\":\"文件上传成功！\" ,\"data\":{\"src\":\"\",\"filename\":\"" + filename + "\",\"newname\":\"" + newName + "\",\"size\":\"" + (file.ContentLength/1024) + "\"}}";
            }
            catch (Exception ex)
            {
                return "{\"code\":1,\"msg\":\"文件上传失败！\" ,\"data\":{\"src\":\"\"}}";
            }
        }