1

Задача следующая: На сайте пользователь имеет возможность загрузить несколько файлов изображений, загрузка выполняется без перезагрузки страницы, во время загрузки появляется progressbar для каждого изображения в отдельности, когда изображения загрузились, с сервера возвращаются миниатюры изображений и располагаются ниже каждого progressbar. Сейчас реализован один progressbar для всех загружаемых файлов, подскажите, пожалуйста, как можно реализовать для каждого файла по отдельности? html:

<form id="formUploadFiles" enctype="multipart/form-data" action="ajax/UploadFiles" method="POST">

js:

var bar = $('.progressbar');
var percent = $('.percent');
var status = $('#status');
// Ajax загрузка изображений
$('#formUploadFiles').ajaxForm({
    beforeSend: function (xhr) {
        var inputFile = document.getElementById('upload1').files;
             var percentVal = '0%';
            //bar.show();
            bar.width(percentVal);
            percent.html(percentVal);

    },
    uploadProgress: function (event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal);
    },
    success: function () {          
    },
    complete: function (xhr) {
        status.append(xhr.responseText);
        //bar.hide();
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
        $(".deletePhoto").unbind('click');
        $(".deletePhoto").on('click', function () {
            deletePhoto($(this))
        })
    }
});
2
  • Кто знает, нужно смотреть документацию той библиотеки, которую вы используете.
    – RubaXa
    30 июл 2014 в 6:45
  • Библиотека jquery.form.js
    – Asy
    30 июл 2014 в 23:56

3 ответа 3

1

HTML5 File API, и не надо писать кастыли

1
  • Так не во всех браузерах работать будет.
    – Asy
    30 июл 2014 в 23:52
1

jquery.form.js — грузит все файлы разом через iframe или XHR2 + FormData. Событие uploadProgress есть только во втором случае. Так что для выполнения вашей задачи, вам нужен другой инструмент для загрузки файлов.

4
  • Я понимаю, я собственно и обратилась потому, что пока не нашла другого решения.
    – Asy
    31 июл 2014 в 4:57
  • Для загрузки файлов есть много [хороших решений][1], например jQuery File Upload, FineUploader, Plupload и так далее. [1]: google.ru/search?q=javascript%20file%20uploader
    – RubaXa
    31 июл 2014 в 5:11
  • Мне нужна загрузка, в которой пользователь может выбрать сразу несколько файлов для загрузки.
    – Asy
    31 июл 2014 в 6:32
  • Любое решение из перечисленных мной, дает такую возможность, пересильте себя и ознакомьтесь с ними.
    – RubaXa
    31 июл 2014 в 6:43
1

Так возвращайте в AJAX'e новую копию для загрузки файла, в чем проблема? Т.е. когда выбрали картинку, поставить туда JS, который делает запрос AJAX на создание дубликата вашей формы для выбора картинки

1
  • Не совсем поняла, что вы имеете в виду.
    – Asy
    30 июл 2014 в 23:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.