@liza2019

Как залить несколько файлов на сервер через ajax?

добрый день. Не получается отправить несколько файлов на сервер.
Есть строка в форме
<button type="button" id="form-1-button-custom-field" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-default"><i class="fa fa-upload"></i> <?php echo $button_upload; ?></button>

есть скрипт который срабатывает при нажатие на кнопку
<script type="text/javascript"><!--
  $('button[id^=\'form-1-button-custom-field\']').on('click', function() {
    var node = this;

    $('#form-upload').remove();

    $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file[]" multiple/></form>');

    $('#form-upload input[name=\'file[]\']').trigger('click');

    if (typeof timer != 'undefined') {
        clearInterval(timer);
    }

    timer = setInterval(function() {
      if ($('#form-upload input[name=\'file[]\']').val() != '') {
        clearInterval(timer);
        $.ajax({
          url: 'index.php?route=extension/module/sobfeedback/upload',
          type: 'post',
          dataType: 'json',
          data: new FormData($('#form-upload')[0]),
          cache: false,
          contentType: false,
          processData: false,
          beforeSend: function() {
            $(node).button('loading');
          },
          complete: function() {
            $(node).button('reset');
          },
          success: function(json) {
            $(node).parent().find('.text-danger').remove();

            if (json['error']) {
                alert(json['error']);
              $(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
            }

            if (json['success']) {
              alert(json['success']);

              $(node).parent().find('input').val(json['code']);
            }
          },
          error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
          }
        });
      }
    }, 500);
  });
  //--></script>

при выборе нескольких файлов на сервер приходит только первый выбранный файл, остальных нету.
Насколько я понимаю что то не хватает в скрипте. Я в JS не очень ((
Перечитала кучу статей перепробовала кучу вариантов, ну не выходит каменный цветочек (
Подскажите плиз что и куда надо добавить в скрипт для загрузки нескольких файлов.
  • Вопрос задан
  • 78 просмотров
Пригласить эксперта
Ответы на вопрос 2
new FormData($('#form-upload')[0]), здесь только первый фаил отправляется... попробуйте заменить на new FormData($('#form-upload')),
Ответ написан
@liza2019 Автор вопроса
всем спасибо, нашла другой вариант, все работает, устраивает по всем параметрам
<form id="js-form" method="post" enctype="multipart/form-data">
	<input id="js-file" type="file" name="file[]" multiple>
</form>
 
<div id="result">
	<!-- Сюда выводится результат из uploads.php -->
</div>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//malsup.github.io/min/jquery.form.min.js"></script>
 
<script>
$('#js-file').change(function() {
	$('#js-form').ajaxSubmit({
		type: 'POST',
		url: '/upload_ajax.php',
		target: '#result',
		success: function() {
			// После загрузки файла очистим форму.
			$('#js-form')[0].reset();
		}
	});
});
</script>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы