Asp.net mvc ASP.NET未将上载进度发送到客户端

我正在做这样的图像上传：

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (e) {
    // THIS DOESN'T UPDATE UNTIL THE END. EVEN WITH A 10MB IMAGE
}, false);
xhr.open('POST', 'https://www.coolsite.com/api/upload', true);
reader.onload = function (evt) {
    var blob = new Blob([evt.target.result]);
    var formData = new FormData();
    formData.append('image', blob);
    xhr.send(formData);
};
reader.readAsArrayBuffer(file);

public class VideoController : CORSController
{
    ImageSaver imageSaver = new ImageSaver();
    public HttpResponseMessage Post()
    {
        Stream imageStream = HttpContext.Current.Request.Files[0].InputStream;
        imageSaver.save(imageStream);
        return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
    }
}

public class CORSController : ApiController
{
    public HttpResponseMessage Options()
    {
        return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
    }
}

public ActionResult Upload(HttpPostedFileBase file)
{
     if (file != null)
     {
          string extension = Path.GetExtension(file.FileName).ToLower();
          if (extension == ".jpg" || extension == ".png")
          {
               file.SaveAs(Server.MapPath(_directory + file.FileName));
               return PartialView("_view");
          }
          else throw new Exception("Not Supported File");
     }
     throw new Exception("Empty File");
}

然后在服务器上，我这样读：

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (e) {
    // THIS DOESN'T UPDATE UNTIL THE END. EVEN WITH A 10MB IMAGE
}, false);
xhr.open('POST', 'https://www.coolsite.com/api/upload', true);
reader.onload = function (evt) {
    var blob = new Blob([evt.target.result]);
    var formData = new FormData();
    formData.append('image', blob);
    xhr.send(formData);
};
reader.readAsArrayBuffer(file);

public class VideoController : CORSController
{
    ImageSaver imageSaver = new ImageSaver();
    public HttpResponseMessage Post()
    {
        Stream imageStream = HttpContext.Current.Request.Files[0].InputStream;
        imageSaver.save(imageStream);
        return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
    }
}

public class CORSController : ApiController
{
    public HttpResponseMessage Options()
    {
        return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
    }
}

public ActionResult Upload(HttpPostedFileBase file)
{
     if (file != null)
     {
          string extension = Path.GetExtension(file.FileName).ToLower();
          if (extension == ".jpg" || extension == ".png")
          {
               file.SaveAs(Server.MapPath(_directory + file.FileName));
               return PartialView("_view");
          }
          else throw new Exception("Not Supported File");
     }
     throw new Exception("Empty File");
}

但问题是，即使我使用了巨大的图像文件，客户端也只会在文件上传完成后获取进度事件。我已经找到了这个问题的答案，并尝试了各种附加进度事件的配置，但没有任何效果。我想我在服务器上做错了什么

注意-这是CORS上载，因此可能与此有关。

如果浏览器控制台中没有错误或返回状态，则问题与服务器或其配置无关。尽管如此，我认为显示上传进度主要是客户端的问题。因此，我建议您使用更干净、有组织的客户端代码，如我为您编写的代码：

var bar = $('#uploadprogress');//like a <div> which will show the progress
var current = $('#preview');

$('#sendform').ajaxForm({
    beforeSend: function () {
        $('#progressbar').show();
        var percentVal = '0%';
        bar.width(percentVal)
        bar.html(percentVal);
    },
    uploadProgress: function (event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        bar.html(percentVal);
    },
    success: function () {
        var percentVal = '100%';
        bar.width(percentVal)
        bar.html(percentVal);
    },
    complete: function (xhr) {
        current.html(xhr.responseText);
    }
});

---

尝试添加这些行。我通常将它们添加到在_layout视图中加载的.js文件中，这样我就可以在任何地方获得“加载效果”，否则，只需在上传文件的页面中添加它们

$(document).on({
    ajaxStart: function () { $body.addClass("loading"); },
    ajaxStop: function () { $body.removeClass("loading"); }
});

然后添加以下css类

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url('../Images/Loader.gif') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our modal element will be visible */
body.loading .modal {
    display: block;
}

---

最后选择一个gif加载程序（例如，从这里）

我试过如下方法。这对我有用

xhr.upload.addEventListener("progress", function (e) {
       console.log((e.loaded / e.total * 100).toFixed(2) + '%');
}, false);

---

看看这个

你的服务器端代码没有任何进展。而且%上传不是mvc的现成功能。要获得完成进度百分比值，您可能应该像这样使用signer，因为您的服务器端代码不会响应任何进度。而且%上传不是mvc的现成功能。要获得完成进度%的值，您可能应该像这样使用SignalR。这不是正确的答案，但悬赏即将结束，您是唯一一个没有在响应中使用jQuery的人。