如何实现旋转器或进度栏？

Question

我有一个表单数据，该数据将文件传递给IFORMFILE以读取Excel文件中的数据。我想在方法读取时添加一些旋转器并将数据上传到数据库。我正在从按钮提交中传递文件...看到一些可以使用Ajax完成的帖子，因为我不确定如何在代码中实现，而是使用Ajax尝试了几种方法，但是对FormData有问题。

<form enctype="multipart/form-data" method="post" asp-controller="UploadController" asp-action="Upload">
        <div class="mt-5">
            <div class="row">
                <div class="col-6 mb-3">
                    <h3>2. Upload a File</h3>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="file" />
                        <label class="custom-file-label" for="customFile">Choose file</label>
                        <i>Only Excel file .xls, .xlsx</i>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-5">
            <div class="row">
                <div class="col-6">
                    <div class="float-left">
                        <button type="submit" id="submit" name="Submit" class="btn btn-info">Upload</button>
                        <button asp-controller="Exposure" asp-action="Index" type="submit" class="btn btn-light" data-dismiss="modal">Back to List</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

<---Method---->
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Upload(IFormFile file)
{
   if(file != null)
   {
   
   }
}

Answer 1

我更改您的代码，并通过JavaScript添加进度栏，您可以参考以下演示：

<form enctype="multipart/form-data" method="post" asp-controller="UploadController" asp-action="Upload">
    <div class="mt-5">
        <div class="row">
            <div class="col-6 mb-3">
                <h3>2. Upload a File</h3>
                <div class="custom-file">
                    <input type="file" class="custom-file-input" name="file" id="File" />
                    <label class="custom-file-label" for="customFile" >Choose file</label>
                    <i>Only Excel file .xls, .xlsx</i>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-5">
        <div class="row">
            <div class="col-6">
                <div class="float-left">
                    <button id="submit" name="Submit" class="btn btn-info" onclick="UploadImage()">Upload</button>
                    <button asp-controller="Exposure" asp-action="Index" type="submit" class="btn btn-light" data-dismiss="modal">Back to List</button>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped 
    active" role="progressbar"
         aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
</div>

<script>
   function UploadImage(){
       var data = new FormData;
       var fileInput = document.getElementById("File");
       var files = fileInput.files;
      for(var i = 0; i < files.length; i++) {
        data.append("files",files[i])
      }
      
      $.ajax({
        xhr: function() {
        var xhr = new window.XMLHttpRequest();
      
        xhr.upload.addEventListener("progress", function(evt) {
          if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);
      
            $('.progress-bar').width(percentComplete+'%');
            $('.progress-bar').html(percentComplete+'%');
      
           }
        }, false);
      
         return xhr;
        },
        url: '/UploadController/Upload',
        type: 'POST',
        data: data,
        contentType: false,
        processData: false,
        success: function(result) {
          console.log(result);
        }
      });
   }
</script>

控制器

   [HttpPost]
    public async Task<IActionResult> Upload(IList<IFormFile> files)
    {
        //......
    }

然后，当您上传文件时，将有一个进度栏。

< < a href =“ https://i.sstatic.net/eecy2.png” rel =“ nofollow noreferrer”>