Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Ожидание окончания загрузки файла (https://javascript.ru/forum/jquery/52828-ozhidanie-okonchaniya-zagruzki-fajjla.html)

Sanu0074 09.01.2015 07:13

Ожидание окончания загрузки файла
 
Здравствуйте. Вот у меня такая задача, пишу jQuery плагин, внутри которого есть загрузка файлов, такая последовательность действий, извлекаются все поля type=file, далее перебирается все, если есть атрибут multiple у текущего - то все что в нем отправляется по очереди и так до конца перебора всех полей. Мне необходимо заставить скрипт ждать пока закончится отправку текущего файла и перейти к след итерации перебора (each). Вот то что я написал:
var sel = $('.file');
                if(sel.length>0){
                    console.log('Saved files, total fields: '+sel.length);
                    
                    
                    function sendFile(fd){
                        $.element.stateUpload = true;
                        
                        $.ajax({
                            type: 'POST',
                            url: HOST+'/uploadFile',
                            data: fd,
                            processData: false,
                            contentType: false,
                            success: function(data) {
                                $.element.stateUpload = false;
                                console.log(data);

                            },
                            error: function(data) {
                                $.element.stateUpload = false;
                                console.log(data);
                            
                            }
                        });
                    }
                    
                    
                    $.each(sel,function(){  //отправка всех файлов по очереди даже если multiple - то по одному
                        
                        var fd = new FormData();
                            fd.append('elementID', data.elementID);
                            fd.append('type',$(this).data('file'));
                            var file = $(this)[0].files[0];
                            if($(this).hasAttr('multiple')){
                                var input = document.querySelector('[data-file="'+$(this).data('file')+'"]').files;
                                for (var i = 0; i < input.length; i++){
                                    fd.append('file',input[i]);
                                    sendFile(fd);
                                }
                            }else{
                                fd.append('file', file);
                                sendFile(fd);
                            }
                            
                    });

Тут еще неплохо было бы выдать alert(), после окончания загрузки всех файлов из очереди. Я лепил интервалы, ничего толкового не вышло, помогите разобраться!

nerv_ 09.01.2015 10:55

могу дать это
$.postForm = function(uri, form, onSuccess) {
    var formElement = $(form).get(0);
    var formData = new FormData(formElement);
    var onAjaxSuccess = onSuccess || $.noop;
    return $.ajax({
        url: uri,
        type: 'POST',
        data: formData,
        cache: false,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: onAjaxSuccess
    });
};

$('#test-form').submit(function(event) {
    event.preventDefault();

    $.postForm('/demo/echo.php', this).success(function(data) {
        console.log(data);
    });
});


дальше сам =)

Sanu0074 09.01.2015 15:19

nerv_,
а что здесь поставит в очередь запросы?

danik.js 09.01.2015 20:39

Цитата:

Сообщение от Sanu0074
поставит в очередь запросы?

А нафиг оно надо? Лучше разом отправить - быстрее будет.

Sanu0074 10.01.2015 01:56

Цитата:

Сообщение от danik.js (Сообщение 350507)
А нафиг оно надо? Лучше разом отправить - быстрее будет.

такая задумка)

собственно набодяжил решение, главное работает)
if(sel.length>0){
                    console.log('Saved files, total fields: '+sel.length);
                    
                    
                    function sendFile(fd){
                        $.element.stateUpload = true;
                        
                        $.ajax({
                            type: 'POST',
                            url: HOST+'element/uploadFile',
                            data: fd,
                            processData: false,
                            contentType: false,
                            success: function(data) {
                                $.element.stateUpload = false;
                                console.log(data);

                            },
                            error: function(data) {
                                $.element.stateUpload = false;
                                console.log(data);
                            
                            }
                        });
                    }
                    
                    var obFD = [];   
                    
                    $.each(sel,function(){  
                        var fd = new FormData();
                            fd.append('elementID', data.elementID);
                            fd.append('type',$(this).data('file'));
                            var file = $(this)[0].files[0];
                            if($(this).hasAttr('multiple')){
                                var input = document.querySelector('[data-file="'+$(this).data('file')+'"]').files;
                                for (var i = 0; i < input.length; i++){
                                    var fd = new FormData();
                                        fd.append('elementID', data.elementID);
                                        fd.append('type',$(this).data('file'));
                                        fd.append('file',input[i]);
                                        obFD.push(fd);
                                }
                            }else{
                                fd.append('file', file);
                                obFD.push(fd);
                            }
                    });
                    
                    var i = 0;
                    var t = setInterval(function(){
                        if(!$.element.stateUpload){
                            sendFile(obFD[i]);
                            i++;
                        }
                        if(i==obFD.length){
                            clearInterval(t);
                            $.wnd.close(true);
                            $.sysMsg.showOk(data.msg);
                            return;
                        }
                    },1000);
                    
                    return;
                }

danik.js 10.01.2015 11:37

Цитата:

Сообщение от Sanu0074
такая задумка)

Другими словами - навязчивая идея? Бывает. Кстати, это лечится.


Часовой пояс GMT +3, время: 09:40.