ФорумПрограммированиеJavaScript → Progressbar при загрузке файлов через ajax

Progressbar при загрузке файлов через ajax

  • md5

    Сообщения: 11949 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 0:30

    Не могу к каждой закачке прилепить свой прогрессбар.
    При выборе нескольких файлов - создаются li для каждого, с полоской прогрессбара внутри

    Вешаю событие
    myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) {
    myXhr.upload.addEventListener('progress', progress, false);
    }


    и определяю функцию progress, где вычисляется прогресс загрузки
    function progress(e)
    {
    if (e.lengthComputable) {
    var total = e.total;
    var loaded = e.loaded;
    var percent = Number(((e.loaded * 100)/e.total).toFixed(2));
    console.log(percent);
    }
    }


    Но я не могу ей передать параметром, в каком li мне нужно рисовать этот бар… Как быть?
    Наглядно это выглядит как в аттаче
    все умрут, а я изумруд
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 0:32, спустя 2 минуты

    ну как же быть то? конечно сделать пркси функцию с локальными замыканием на li и в ней уже вызывать progress(e, li);

    а то ты нуб

    Сапожник без сапог
  • md5

    Сообщения: 11949 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 2:15, спустя 1 час 42 минуты 12 секунд

    @phpdude, ебать, ты дуд
    че я внатуре как лох) сразу туда и вставил)

    myXhr.upload.addEventListener('progress', function(e) {
    var total = e.total;
    var loaded = e.loaded;
    var percent = Number(((e.loaded * 100)/e.total).toFixed(2));
    li.find('i').width(percent+'%');
    }, false);
    все умрут, а я изумруд
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 4:37, спустя 2 часа 22 минуты 31 секунду

    @md5, поазывай весь код короче

    Сапожник без сапог
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 4:44, спустя 6 минут 19 секунд

    console.log(e) для начала

    Спустя 239 сек.

    Не пользовался событием progress, но мне кажется что у тебя будет подгружаться контент рандомно и повесив несколько событий с замыкание на элемент ты не решишь проблему. Надо посмотреть что есть в e, может там путь есть или тому подобное и использовать эту инфу для идентификации. Покажи все что есть в "e"

    adw/0
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 1 сентября 2014 г. 5:01, спустя 17 минут 45 секунд

    Я бы тоже посмотрел, что там у @md5 в e…
    Высокоуровневое абстрактное говно
  • md5

    Сообщения: 11949 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 5:14, спустя 12 минут 54 секунды

    у меня все получилось, на каждую фотку свой прогрессбар работает, все окей
    я это в виде плагина захуярил, могу целиком выложить, демку сделать, если кому-то интересно
    но в целом работает как при подачи объявления на авито
    все умрут, а я изумруд
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 5:39, спустя 24 минуты 47 секунд

    показывай давай, программист

    adw/0
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 7:01, спустя 1 час 21 минуту 37 секунд

    ну даай программист не томи

    Сапожник без сапог
  • Sinkler

    Сообщения: 7931 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 8:49, спустя 1 час 48 минут 34 секунды

    он испугался

  • md5

    Сообщения: 11949 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 8:50, спустя 59 секунд

    [size=200]ХУЯК НАХУЙ![/size]

    (function($) {
    var defaults = {
    'buttonTitle':'загрузить фотографию',
    'url':'/ajax/upload/',
    'urlDelete':'/ajax/delete/',
    'filesDir':'/upload/',
    'allowedExtensions':'jpg,jpeg,png,gif,bmp',
    'limit':5, // number of files
    'limitSize':4, // filesize limit in Mb
    'data':null, // additional data
    'errorFormat':'недопустимый формат',
    'errorSize':'размер превышает'
    };

    var options;

    $.fn.ezPhotoUploader = function (params) {
    options = $.extend({}, defaults, options, params);

    var ul = this;
    var items = ul.children('li').length;

    // add button
    ul.append('<li class="add" title="' + options.buttonTitle + '"><i></i><input style="display:none;" accept="image/*" name="file" value="image" multiple="multiple" type="file"><a href="#"></a></li>');
    var button = ul.find('li.add > input[type=file]');

    // click button
    button.next('a').click(function() {
    button.click();
    return(false);
    });

    // choose files
    button.change(function() {
    ul.find('li.add > i').addClass('on');
    button.attr('disabled', true);

    $(button[0].files).each(function() {
    var file = this;
    if (!validateExtension(file)) {
    $.growl.error({ message: file.name + ' — ' + options.errorFormat });
    }
    else if (!validateSize(file)) {
    $.growl.error({ message: file.name + ' — ' + options.errorSize + ' ' + options.limitSize + 'Mb' });
    }
    else {
    var li = $('<li><div><span><i style="width:15%;"></i></span></div></li>');
    li.insertBefore(ul.find('li.add'));
    items++;

    upload(button.attr('name'), file, li);

    if (items >= options.limit) {
    ul.find('li.add').hide();
    return(false);
    }
    }
    });

    ul.find('li.add > i').removeClass('on');
    button.attr('disabled', false);
    });

    if (items >= options.limit) {
    ul.find('li.add').hide();
    }

    function validateExtension(file)
    {
    var ext = file.name.split('.').pop().toLowerCase();
    var allowed = options.allowedExtensions.split(',');
    return($.inArray(ext, allowed) != -1);
    }
    function validateSize(file)
    {
    return(options.limitSize == 0 || ((file.size/1024)/1024) < options.limitSize);
    }

    function upload(field, file, li)
    {
    var formData = new FormData();
    formData.append(field, file);
    formData.append('data', options.data);
    $.ajax({
    url: options.url,
    type: 'POST',
    data: formData,
    dataType: 'json',
    success: function(data) {
    var percent = 100;
    li.find('i').width(percent+'%');
    if (data.type == 'error') {
    $.growl.error({ message: data.info });
    $(li).fadeOut(function() {
    $(li).remove();
    });
    items–;
    }
    else {
    li.html('<a href="#" class="d" rel="' + data.file + '" title="удалить"><span class="ui-icon ui-icon-white ui-icon-close"></span></a><a href="#" class="r" title="повернуть на 90&#176;"><span class="ui-icon ui-icon-white ui-icon-arrowrefresh-1-s"></span></a><a href="' + options.filesDir + data.file + '" target="_blank"><img src="' + options.filesDir + 'thumb-' + data.file + '"></a><input type="hidden" name="photos[]" value="' + data.file + '"><input type="hidden" name="rotates[]" value="0" class="r">');
    }
    },
    xhr: function() {
    myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) {
    myXhr.upload.addEventListener('progress', function(e) {
    var total = e.total;
    var loaded = e.loaded;
    var percent = Number(((e.loaded * 100)/e.total).toFixed(2));
    li.find('i').width(percent+'%');
    }, false);
    }
    return(myXhr);
    },
    async: true,
    cache: false,
    contentType: false,
    processData: false
    });
    }
    function progress(e)
    {
    if (e.lengthComputable) {
    var total = e.total;
    var loaded = e.loaded;
    var percent = Number(((e.loaded * 100)/e.total).toFixed(2));
    //li.find('i').width(percent+'%');
    console.log(percent);
    }
    }

    // delete uploaded photo
    $(ul).on('click', 'a.d', function() {
    var a = $(this);
    $.getJSON(options.urlDelete + '?file=' + $(this).attr('rel'), function(data) {
    if (data.type == 'success') {
    $(a).parent().fadeOut(function() {
    $(this).remove();
    });
    items–;
    if (items < options.limit) {
    ul.find('li.add').show();
    }
    }
    else {
    $.growl.error({ message: data.info });
    }
    });
    return(false);
    });

    // rotate uploaded photos
    $(ul).on('click', 'a.r', function() {
    var old_value = parseInt($(this).parent().find('input.r').val());
    var value = old_value + 90;
    if (value == 360) {
    value = 0;
    }
    $(this).parent().find('input.r').val(value);

    var img = $(this).parent().find('img');
    $({deg: old_value}).animate({deg: value}, {
    duration: 300,
    step: function(now) {
    $(img).css({
    transform: 'rotate(' + now + 'deg)'
    });
    }
    });

    return(false);
    });
    }
    })(jQuery);


    ну и захуяривается аля
    <ul class="photos"></ul>

    <script type="text/javascript">
    $('.photos').ezPhotoUploader({
    url:'/ajax/board_photo_add_tmp/',
    urlDelete:'/ajax/board_photo_delete_tmp/',
    filesDir:'/upload/tmp/board/'
    });
    </script>


    Спустя 146 сек.

    а выглядит так


    Спустя 20 сек.

    заебись, аттач не добавляется

    Спустя 7 сек.

    http://take.ms/RPE4M
    все умрут, а я изумруд
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 8:53, спустя 2 минуты 58 секунд

    Сапожник без сапог
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 1 сентября 2014 г. 13:18, спустя 4 часа 25 минут 14 секунд

    items–;

    раньше не видел такого
    Высокоуровневое абстрактное говно
  • AlexB

    Сообщения: 4290 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 13:29, спустя 11 минут

    Мне одному после знакомства с angularjs от жукверевских конструкций типа ul.find('li.add > i').removeClass('on') блевать охота?
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 1 сентября 2014 г. 13:30, спустя 44 секунды

    items–;

    раньше не видел такого

    @Stasovsky, ну это мд свой новый синтаксис замутил

    Спустя 62 сек.

    Мне одному после знакомства с angularjs от жукверевский конструкций типа
    ul.find('li.add > i').removeClass('on') блевать охота?

    @AlexB, =))

    Сапожник без сапог

Пожалуйста, авторизуйтесь, чтобы написать комментарий!