Ожидание окончания загрузки файла (jQuery)

110

Sanu0074

9 января 2015, 04:15

1388

Здравствуйте. Вот у меня такая задача, пишу 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);

                                    sendFile(fd);

                                }

                            }else{

                                fd.append('file', file);

                                sendFile(fd);

                            }

                            

                    });

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

192

lutskboy

9 января 2015, 12:07

#1

А готовый не подойдет?

http://danielm.herokuapp.com/demos/dnd/

или там подсмотрите реализацию.

1

110

Sanu0074

9 января 2015, 12:20

#2

lutskboy, нет, не подойдет. Я думаю надо правильно интервал написать и все ок будет

110

Sanu0074

9 января 2015, 22:58

#3

вот я набодяжил решение, главное работает)

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);

                                        obFD.push(fd);

                                }

                            }else{

                                fd.append('file', file);

                                obFD.push(fd);

                            }

                    });

                    

                    var i = 0;

                    var t = setInterval(function(){

                        if(!$.element.stateUpload){

                            sendFile(obFD);

                            i++;

                        }

                        if(i==obFD.length){

                            clearInterval(t);

                            $.wnd.close(true);

                            $.sysMsg.showOk(data.msg);

                            return;

                        }

                    },1000);

                    

                    return;

                }

427

siv1987

10 января 2015, 14:38

#4

async false

110

Sanu0074

10 января 2015, 20:00

#5

siv1987, в таком случает висит страница, особенно если файлы большие

427

siv1987

10 января 2015, 20:10

#6

Sanu0074:
Мне необходимо заставить скрипт ждать пока закончится отправку текущего файла

В каком случае тогда не висит страница, пока скрипт ждет полную загрузку текущего файла?...

110

Sanu0074

10 января 2015, 20:12

#7

siv1987, но при этом должна продолжать жить страница, иначе какой смысл делать ajax запрос?

427

siv1987

10 января 2015, 20:18

#8

делайте тогда асинхронный запрос, и вызывайте рекурсивно функцию по окончания загрузки.

110

Sanu0074

10 января 2015, 20:36

#9

siv1987, а то что я написал с интервалом, очень плохо?

427

siv1987

10 января 2015, 21:05

#10

Имхо, костыль.


var _index = 0;



function sendFiles(obFD){

	var fd = obFD[_index];

	if(fd){

		_index++;

		$.ajax({

			success: function(data) {

				sendFiles(obFD);

			},

		});

	}

	else{

		//Finish

	}

}

1

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ

Яндекс Вебмастер вынес товарные фиды в отдельный раздел