Arhn - архитектура программирования

Загрузка файла Ajax web api с индикатором выполнения

Я пытаюсь использовать этот код для загрузки файла на сервер,

HTML:

<input type="file" id="file1" name="browsefile" multiple="multiple"  accept="video/mp4,video/*">

JavaScript:

function FileUpload(SomestringParameter) {
    var files = $("#file1").get(0).files;
    if (files.length > 0) {
        if (window.FormData !== undefined) {
            var data = new FormData();
            for (i = 0; i < files.length; i++) {
                data.append("file" + i, files[i]);
        }
        $.ajax({
            type: "POST",
            url: "http://localhost:50443/UploadFile/" + SomestringParameter,
            contentType: false,
            processData: false,
            data: data,
            success: function (results) {
                alert(results);
                for (i = 0; i < results.length; i++) {
                    alert(results[i]);
                }
            }
        });

    } 
    else {
        alert("This browser doesn't support HTML5 multiple file uploads!");
    }
}
}

В контроллере веб-API,

[HttpPost]
[ActionName("UploadFile")]
public HttpResponseMessage UploadFile([FromRoute]string SomeStringData)
{
    // Save the uploaded file here on the server
}

Файл загружается отлично. Мой вопрос в том, как показать индикатор выполнения, я использую jquery mobile для проектирования.

Как я могу отобразить индикатор выполнения в процентах или что-то в этом роде?



Ответы:


1

Пробовали ли вы загрузку файла jQuery от blueimp? Я использовал его в нескольких своих проектах, и он предоставляет вам индикатор выполнения вместе с множеством других функций, которые вы хотели бы иметь при загрузке файла.

В базовой версии (как и во всех остальных версиях) есть индикатор загрузки файлов. Вы можете ознакомиться с демонстрацией.

введите здесь описание изображения

Этот подключаемый модуль также позволяет изменять индикатор выполнения и связанную с ним информацию, предоставляя функцию fileuploadprogressЧитать документацию

$('#fileupload').bind('fileuploadprogress', function (e, data) {
    // Log the current bitrate for this upload:
    console.log(data.bitrate);
});

Этот подключаемый модуль использует компонент индикатор выполнения Bootstrap для отображения индикатора выполнения.

Что еще лучше, так это то, что он обеспечивает задокументированную интеграцию с ASP.NET и есть проект github о том, как использовать этот плагин с ASP.NET MVC.

Надеюсь, это поможет вам.

14.04.2014
Новые материалы

Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..