自定义上传控件

先上图：

 前端代码：

@(Html.DevExtreme().DataGrid<MettingReportViewModel>()
    .ID("gridMetting")    
    .OnToolbarPreparing("toolbar_preparing")
)    


@(Html.DevExtreme().FileUploader()
    .ID("file-uploader")
    .UploadUrl(Url.Action("ImportExcelFile", "MettingReport"))
    .DialogTrigger("#btnImport") @*将上传控件的触发事件绑定到按钮上，这样点击按钮就会弹出文件选择框了*@
    .Name("formFile")
    .Accept("*")
    .ChunkSize(2000) @* 分段上传必须设置*@
    .Visible(false) @* 将上传控件隐藏*@
    .OnUploadError("fileUploader_UploadError")
    .OnUploaded("fileUploader_uploaded")
    .OnUploadStarted("fileUploader_uploadStarted")
    .OnProgress("onUploadProgress")
  
)


<style>
.btnImport {
     38px;
    height: 36px;
    background-color: #fff;
    border: solid 1px #ddd;
    border-radius: 4px;
}

.btnImport:hover {
    background-color: #f5f5f5;
}
.chunk {
    border-top: 0 solid #0080008a;
     38px;
    position: absolute;
    top: 36px;
    border-radius: 5px;
}

</style>

<script>
    function toolbar_preparing(e) {
        e.toolbarOptions.items.unshift(
            {
                location: "after",
                template: "<div><button class='btnImport' id='btnImport' title='上传文件扩展名为：.xls 或 .xlsx'><i class='dx-icon dx-icon-upload'></i></button><div class='chunk' id='chunkDiv'></div></div>"
            }
        );
    }
    
    var totalChunk = 36;
    function fileUploader_UploadError(e) {
       // 上传失败提示;
        alterError(e.error.responseText);
        displayChunkDiv();
    }
    function fileUploader_uploaded(e) {
       // console.log(e);
        alterSuccess("上传成功");
        dataGrid.refresh(true);      
        $("#chunkDiv").css({ "border-top-width": totalChunk + "px", "top": "0" });

        displayChunkDiv();
    }

    function displayChunkDiv() {
        setTimeout(function () {
            $("#chunkDiv").css({ "border-top-width": "0", "top": totalChunk + "px" });
            $("#btnImport").attr("disabled", false);
        }, 1000);
    }

    function fileUploader_uploadStarted(e) {
       // console.log(e);
        $("#btnImport").attr("disabled", true);
    }

    function onUploadProgress(e) {
       // console.log(e.segmentSize + "   " + e.bytesLoaded + "   " + e.bytesTotal);
        var w = e.bytesLoaded / e.bytesTotal * totalChunk;
        //console.log(w);
        if (w <= (totalChunk - totalChunk / 6)) {
            //显示 低于1/6 的进度条，用于页面效果
            $("#chunkDiv").css({ "border-top-width": w + "px", "top": (totalChunk - w) + "px" });
        } 
    }
</script>

后端代码：

 
    public class FileUploaderChunkMetaData
    {
        public int Index { get; set; }
        public int TotalCount { get; set; }
        public int FileSize { get; set; }
        public string FileName { get; set; }
        public string FileType { get; set; }
        public string FileGuid { get; set; }
    }
 public class MettingReportController : Controller
    {
        [HttpPost]
        public async Task<ActionResult> ImportExcelFile([FromServices] IWebHostEnvironment environment, IFormFile formFile, string chunkMetadata)
        {
            var temResult = new MessageModel<bool>();

            try
            {
                var currentDate = DateTime.Now;
                var webRootPath = environment.WebRootPath;
                var filePath = $"/UploadFiles/{currentDate:yyyyMMdd}/";

                //创建每日存储文件夹
                if (!Directory.Exists(webRootPath + filePath))
                {
                    Directory.CreateDirectory(webRootPath + filePath);
                }

                var fileRoot = webRootPath + filePath;

                if (!string.IsNullOrEmpty(chunkMetadata) && formFile!=null)
                {
                    var metaDataObject = JsonConvert.DeserializeObject<FileUploaderChunkMetaData>(chunkMetadata);

                    //文件后缀
                    var fileExtension = Path.GetExtension(metaDataObject.FileName);//获取文件格式，拓展名
                    string[] allowExtensions = { ".xls", ".xlsx" };
                    if (!allowExtensions.Any(n => n.Equals(fileExtension, StringComparison.CurrentCultureIgnoreCase)))
                    {
                        throw new Exception("上传的文件格式不正确");
                    }

                    var tempFilePath = Path.Combine(fileRoot, metaDataObject.FileGuid + ".tmp");             
                    using (var stream = new FileStream(tempFilePath, FileMode.Append, FileAccess.Write))
                    {
                        //追加到文件流
                        formFile.CopyTo(stream);

                        //判断文件大小
                        var fileSize = stream.Length;
                        if (fileSize > 1024 * 1024 * 10) //10M TODO:(1mb=1024X1024b)
                        {
                            throw new Exception("上传的文件不能大于10M");
                        }

                    }


                    if (metaDataObject.Index == metaDataObject.TotalCount - 1)
                    {
                        //保存的文件名称(以名称和保存时间命名)
                        var saveName = metaDataObject.FileName.Substring(0, metaDataObject.FileName.LastIndexOf('.')) + "_" + currentDate.ToString("HHmmss") + fileExtension;
                        //完整的文件路径
                        var completeFilePath = Path.Combine(fileRoot, saveName);

                        //重名检查
                        if (System.IO.File.Exists(completeFilePath))
                        {
                            throw new Exception("上传的文件异常，请重新上传");
                        }

                        //保存文件
                        System.IO.File.Copy(tempFilePath, completeFilePath);
                        //删除临时文件
                        System.IO.File.Delete(tempFilePath);

                        //处理导入文件(业务相关)
                        
                        
                        //返回成功
                        temResult.Success = temImportResult.Success;
                        temResult.Msg = temImportResult.Msg;
                        temResult.Response = temImportResult.Response;
                    }
                    else
                    {
                        temResult.Success = true;
                        temResult.Response = true;
                    }
                }
                else {
                    temResult.Success = false;
                    temResult.Msg = $"导入失败,未检测上传的文件信息";
                    temResult.Response = false;

                    throw new Exception("未检测上传的文件信息");
                }

            }
            catch (Exception ex)
            {
                temResult.Success = false;
                temResult.Msg = $"导入失败:{ex.Message}";
                temResult.Response = false;
                //return BadRequest($"导入失败:{ex.Message}");
            }

            if (temResult.Success == true && temResult.Response == true)
            {
                return Ok();
            }
            else
            {
                return BadRequest($"{temResult.Msg}");
            }
        }
    }