Форум

Ruslan1802 · #1 (**permalink**) 10.03.2014, 11:14

Всем добрый день, прошу помощи. Дело в том, что в месте, где выполняется цикл $.each() cначала запускаются функции, а потом выполняется их код одновременно. Но если так, то у меня создается несколько потоков, чего мне не надо, так как собираюсь отправлять файлы по очереди. Если я правильно понимаю, нужно проверить, завершила ли функцию свою работу, а уже тогда дальше выполнять цикл. Но как это cделать, я не знаю.

$(document).ready(function(){




$('#upload a').click(function(e){
$(this).parent().find('input[type="file"]').click();
e.preventDefault();
});

$('#upload input[type="file"]').change(function() {
     uploadFile(this.files);
	 $(this).val('');
});


var files_mas = new Array();
var maxSize = 1000000000000000; //max размер файла

var server = $('#upload').attr('action');
var file_server = $('#upload input[type="file"]').attr('name'); //имя пост запроса



function uploadFile(files) {

$.each(files, function(index, file) { 
if (file.size < maxSize) { 

 files_mas.push(file);
$('#status').append('<div class="progress progress-striped active" id="'+files_mas.length+'"><div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%"><span class="sr-only">45% Complete</span></div></div><div class="status"></div>');
   }
	else
	{
alert('Слишком большой файл');
}
});
		
		
}

var req = new XMLHttpRequest();
var form = new FormData(); // Создаем объект формы.

function add_s(index, file) {
req.open('POST', 'upload.php', true); // Открываем коннект до сервера.
form.append('upload', file);

var i = index + 1;


req.upload.onprogress = function(e) {
var percent = 0;
var position = e.loaded || e.position;
var total = e.total || e.totalSize;
if(e.lengthComputable){
percent = Math.ceil(position / total * 100);

$('#'+i+'> div').attr('style', 'width: '+percent+'%').text(percent+'%');
if(percent == 100) {
alert('ФАЙЛ | ' + file.name + ' | УСПЕШНО ЗАГРУЖЕН!!!');
files_mas.length = files_mas.length - 1;
alert(files_mas.length);
$('#'+i).remove();   

}

}

	
} 


req.onreadystatechange = function () {
            
            if (this.readyState == 4) { 
                if(this.status == 200) { 	

alert(req.responseText);

                } else {
                    alert('error');
                }

            }

        }


req.send(form); 


} 

$('#upload').submit(function(e) { 
e.preventDefault(); 

$.each(files_mas, function(index, file) {

add_s(index, file);

});
});


});

<style type="text/css">
#upload > input[type="file"] { display:none; }
</style>
</head>
<body>

<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<a href="#">Прикрепить файлы</a>
<input type="file" name="upload[]" multiple />
<br>
<br>
<input type="submit" value="Загрузить" class="btn" >
</form>

danik.js · #2 (**permalink**) 10.03.2014, 11:35

Сообщение от Ruslan1802

собираюсь отправлять файлы по очереди

Ну так отправь одним запросом. Это будет всяко быстрее и проще.

Ruslan1802 · #3 (**permalink**) 10.03.2014, 11:42

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

danik.js · #4 (**permalink**) 10.03.2014, 12:14

А че ты $.post функцию не используешь?
Ок, если нужно все отдельно, то делай отдельные запросы. Но вот почему

Сообщение от Ruslan1802

у меня создается несколько потоков, чего мне не надо, так как собираюсь отправлять файлы по очереди

Почему не хочешь параллельно?

Ruslan1802 · #5 (**permalink**) 10.03.2014, 13:30

1) Это пока только набросок, конечно, с $.post было бы более правильнее.

2) Насколько я знаю, такой метод нагружает сервер и клиента, особенно при загрузки множества файлов достаточно крупного объема.
Может быть я и не прав(

Сообщение от danik.js

Ок, если нужно все отдельно, то делай отдельные запросы.

Тогда вопрос: как их сделать?

ибо есть массив, в который добавляются файлы при событии выбора файла. Как только пользователь сочтет, что он готов их загрузить, он жмет на соответствующую кнопку. На кнопке соответственно срабатывает событие отправки. И по задумке, $.each должен был "читать" этот массив и каждый проход запускать функцию отправки соответствующего файла, при этом остальные должны были ждать своей очереди. Но этого не случилось, вместо этого, он сначала запускал функцию, количество запусков которой было равно количеству файлов в массиве. А вот они в свою очередь уже начинали работать по отдельности, что полностью разрушило мой алгоритм.

Zuenf · #6 (**permalink**) 10.03.2014, 14:18

Так же набросок:

var array = ['one', 'two', 'three'];

function rqursiyaTipa(data, array, i){
    if(array[i])
        $.post('test.php', {data: array[i]}, rqursiyaTipa(data, array, ++i));
}

rqursiyaTipa('OK TIPA', array, 0);

Ruslan1802 · #7 (**permalink**) 10.03.2014, 15:14

Отлично! Спасибо, хотя сам подумывал над чем-то таким, но с костыльком)
Только получилось не $.post, а $.ajax, ибо в посте нет метода xhr

danik.js · #8 (**permalink**) 10.03.2014, 15:51

Сообщение от Ruslan1802

ибо в посте нет метода xhr

Чего нет?

Ruslan1802 · #9 (**permalink**) 10.03.2014, 17:32

XMLHttpRequest, мне же надо было процесс отслеживать. С $.post не получилось бы

Итог таков:

$(document).ready(function(){

$('#upload a').click(function(e){
$(this).parent().find('input[type="file"]').click();
e.preventDefault();
});

$('#upload input[type="file"]').change(function() {
     uploadFile(this.files);
	 $(this).val('');
});


var files_mas = new Array();
var maxSize = 1000000000000000; //max размер файла

var server = $('#upload').attr('action');
var file_server = $('#upload input[type="file"]').attr('name'); //имя пост запроса



function uploadFile(files) {

$.each(files, function(index, file) { 
if (file.size < maxSize) { 

 files_mas.push(file);
$('#status').append('<div class="progress progress-striped active" id="'+files_mas.length+'"><div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%"><span class="sr-only">45% Complete</span></div></div><div class="status"></div>');
   }
	else
	{
alert('Слишком большой файл');
}
});
		
		
}


function add_s(i, k) {
if(files_mas.length == 0) { alert('Все загрузки завершены!'); $('#upload input[type="submit"]').show();}
var form = new FormData(); // Создаем объект формы.
form.append('upload', files_mas[i]);

var dm = i + 1;

if(files_mas[i]) {


$.ajax({
      url: 'upload.php',
      type: 'post',
      dataType: 'text',
      data: form,
      cache: false,
      contentType: false,
      processData: false,
      forceSync: false,
      xhr: function(){
        var req = $.ajaxSettings.xhr();
        if(req.upload){
          req.upload.addEventListener('progress', function(event) {
            var percent = 0;
            var position = event.loaded || event.position;
            var total = event.total || e.totalSize;
            if(event.lengthComputable){
              percent = Math.ceil(position / total * 100);
            }

$('#'+k+'> div').attr('style', 'width: '+percent+'%').text(percent+'%');

          }, false);
        }

        return req;
      },
      success: function (data, message, xhr){
        //alert('ФАЙЛ | ' + files_mas[i].name + ' | УСПЕШНО ЗАГРУЖЕН!!!');

$('#'+k).remove(); 
add_s(0, ++k);
files_mas.splice(i, 1);

      }

});

} 

}
$('#upload').submit(function(e) { 
e.preventDefault(); 
if(files_mas.length != 0) {
$('#upload input[type="submit"]').hide();
add_s(0, 1);
}
});
});

Форум

Справочник

Discord чат

Курсы javascript