ASP.NET не отправляет информацию о процессе загрузки на клиент

Question

я делаю в загрузке изображения, как это:

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, поэтому, возможно, это имеет какое-то отношение к ней.

Answer 1

Если у вас есть нет ошибки или возвращается статус в консоли браузера, так что проблема не связана с сервером или его конфигурации. Хотя, я считаю, что показ загрузки, в основном, является проблемой на стороне клиента. Поэтому я призываю вас использовать более чистые организованную сторону клиента коды, как этот, который я пишу для вас:

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

Answer 2

Попробуйте добавить эти линий. Я обычно добавляю их в файл .js, загруженный в представление _layout, поэтому я получаю «эффект загрузки» всюду, в противном случае добавляю их только на странице с загрузкой файла.

$(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 (например, отсюда http://www.ajaxload.info/)

Answer 3

Я попытался, как следующее. Это сработало для меня.

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

Answer 4

посмотрите на эту Uploading files with MVC