asp.net-mvc – ASP.NET不向客户端发送上传进度

发布时间：2020-12-16 07:20:28 所属栏目：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);

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

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 };
    }
}

但事情是,即使我使用巨大的图像文件,客户端也只有在文件上传完成后才能获得进度事件.我已经找到了答案,并尝试了各种配置来附加进度事件,但没有任何作用.我想我在服务器上做错了什么.

注意 – 这是一个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);
    }
});

控制器看起来像这样：

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");
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!