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

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

  • md5

    Сообщения: 11950 Репутация: 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

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

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

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

    а то ты нуб

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

    Сообщения: 11950 Репутация: 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

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

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

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

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

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

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

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

    Спустя 239 сек.

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

    adw/0
  • technobulka

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

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

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

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

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

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

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

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

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

    adw/0
  • phpdude

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

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

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

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

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

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

    он испугался

  • md5

    Сообщения: 11950 Репутация: 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(&#39;<li class=&quot;add&quot; title=&quot;&#39; + options.buttonTitle + &#39;&quot;><i></i><input style=&quot;display:none;&quot; accept=&quot;image/*&quot; name=&quot;file&quot; value=&quot;image&quot; multiple=&quot;multiple&quot; type=&quot;file&quot;><a href=&quot;#&quot;></a></li>&#39;);
    var button = ul.find(&#39;li.add > input[type=file]&#39;);

    // click button
    button.next(&#39;a&#39;).click(function() {
    button.click();
    return(false);
    });

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

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

    upload(button.attr(&#39;name&#39;), file, li);

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

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

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

    function validateExtension(file)
    {
    var ext = file.name.split(&#39;.&#39;).pop().toLowerCase();
    var allowed = options.allowedExtensions.split(&#39;,&#39;);
    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(&#39;data&#39;, options.data);
    $.ajax({
    url: options.url,
    type: &#39;POST&#39;,
    data: formData,
    dataType: &#39;json&#39;,
    success: function(data) {
    var percent = 100;
    li.find(&#39;i&#39;).width(percent+&#39;%&#39;);
    if (data.type == &#39;error&#39;) {
    $.growl.error({ message: data.info });
    $(li).fadeOut(function() {
    $(li).remove();
    });
    items–;
    }
    else {
    li.html(&#39;<a href=&quot;#&quot; class=&quot;d&quot; rel=&quot;&#39; + data.file + &#39;&quot; title=&quot;удалить&quot;><span class=&quot;ui-icon ui-icon-white ui-icon-close&quot;></span></a><a href=&quot;#&quot; class=&quot;r&quot; title=&quot;повернуть на 90&amp;#176;&quot;><span class=&quot;ui-icon ui-icon-white ui-icon-arrowrefresh-1-s&quot;></span></a><a href=&quot;&#39; + options.filesDir + data.file + &#39;&quot; target=&quot;_blank&quot;><img src=&quot;&#39; + options.filesDir + &#39;thumb-&#39; + data.file + &#39;&quot;></a><input type=&quot;hidden&quot; name=&quot;photos[]&quot; value=&quot;&#39; + data.file + &#39;&quot;><input type=&quot;hidden&quot; name=&quot;rotates[]&quot; value=&quot;0&quot; class=&quot;r&quot;>&#39;);
    }
    },
    xhr: function() {
    myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) {
    myXhr.upload.addEventListener(&#39;progress&#39;, function(e) {
    var total = e.total;
    var loaded = e.loaded;
    var percent = Number(((e.loaded * 100)/e.total).toFixed(2));
    li.find(&#39;i&#39;).width(percent+&#39;%&#39;);
    }, 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(&#39;i&#39;).width(percent+&#39;%&#39;);
    console.log(percent);
    }
    }

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

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

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

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


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

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


    {+++146+++}
    а выглядит так


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

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

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

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

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

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

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

    items–;

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

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

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

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

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

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

    items–;

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

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

    Спустя 62 сек.

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

    @AlexB, =))

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

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