Как передать данные аякс?

Question

lid2pro @lid2pro

Как передать данные аякс?

Добрый день,

пытаюсь реализовать мультизагрузку картинок и сохранить в БД. Картинки сохраняются, но не передаются данные с полей input.

// 1) Подгружаем jQuery
    // 2)
    function setimage() { // функция загрузки на сервер
      var iter; // кол-во загруженных картинок
      var max = 200;
      // с классом file_link_name приходят загруженные изображения - счетаем их кол-во
      iter = $('.file_link_name').length;
      if(iter>=max){
        alert('Максимально количество фотографий = 200!')
        return;
      }

      $input = $("#upload_input");
      var fd = new FormData;
      // адрес приемщика файлов
      var $url='/upload.php?action=upload'+'&math='+Math.random()*Math.random();
      // массив файлов в нашем инпате
      var inputFile = document.getElementById('upload_input').files;
      // в цикле по данному массиву отправляем файлы на сервер
      for (var i = 0; i < inputFile.length; i++) {
        if(i>max-1){ // проверка на кол-во
          alert('Максимально количество фотографий = 200!')
          return;
        }
        if(iter>max-1){ // еще одна проверка на кол-во
          alert('Максимально количество фотографий = 200!')
          return;
        }
        // формирую объект data
        fd.append('img', $input.prop('files')[i]);
        $.ajax({
          url: $url,
          data: fd,
          processData: false,
          contentType: false,
          type: 'POST',
          success: function (data) {
            // сервер возвращает нам нимиатюру в data
            $("#result").append(data); // вставляю миниатюру в #result
          },
          error: function(data) {
            // действие при ошибке
          }
        });

      }
    }

    // 3)
    /* Обработчики событий кнопки загрузки и нашего input */
    // откладываю возможность загрузки картинок до полной загрузки страницы
    $(document).ready(function() {
      $( "#upload_button").click(function() { // при нажатии на кнопку загрузить
        $("#upload_input").click(); // нажимаю на input file
      });

      $("#upload_input").change(function() { // когда состояние нашего input file меняется
         setimage(); // вызываю функцию асинхронной загрузки файлов
      });
    });

форма

<form action="/upload.php" method="post" class="form-submit" enctype="multipart/form-data">
<input type="text" name="title" class="modalPopupField" placeholder="Название" required /> <b>как мне передать это поле в обработчик?</b>

<input type="text" name="film" class="modalPopupField" placeholder="Фильм" required /> <b>как мне передать это поле в обработчик?</b>

<input title="Выбрать картинки" type="file" multiple="multiple" name="files[]" class="addbtnupload" accept=".jpg,.jpeg,.gif,.png" id="upload_input"/>


<div id="result"></div>

<input type="button" name="SUBMIT" value="Добавить" class="gabtn gabtnye" id="upload_button">

		</form>

Серверная часть скрипта AJAX (upload.php)

// $upload_dir='./../upload/'; <- если папка назначения выше на каталог
	$upload_dir='./upload/'; // папка назначения
	$name = $_FILES["img"]["name"]; // имя файла с разрешением (как на пк донора :)
	$ext = end((explode(".", $name))); // беру разрешение файла
        // если в $ext больше одного разрешения файла, оставлю последний
	$ext = pathinfo($name, PATHINFO_EXTENSION);
        $md_name = MD5($name); // сделал из имяни хэш
	$now=time(); // timestamp
	$file_name = $md_name.$now.'.'.$ext; // сделал новое имя картинке
	$new_name=$upload_dir.$file_name; // путь/имя-файла

    // Функция делает превьюшки (c PNG не работает)
    function resize($img){
       // only if you script on another folder get the file name
        $r = explode("/",$img);
        $name = end($r);
        //new folder
        // $vdir_upload = './../upload/';
        $vdir_upload = './upload/';
        list($width_orig, $height_orig) = getimagesize($img);
        //ne size
        $dst_width = 320; // ширина миниатюр на выходе
        $dst_height = ($dst_width/$width_orig)*$height_orig;
        $im = imagecreatetruecolor($dst_width,$dst_height);
        $image = imagecreatefromjpeg($img);
    imagecopyresampled($im, $image, 0, 0, 0, 0, $dst_width, $dst_height, $width_orig, $height_orig);
        //modive the name as u need
        imagejpeg($im,$vdir_upload . "small_" . $name);
        //save memory
        imagedestroy($im);
        // возвращаю из функции абсолютный путь до миниатюры
        return '/upload/small_'.$name;
    }
      // копирую картинку в нужную нам папку
    	if (copy($_FILES['img']['tmp_name'], $new_name))
    	{
    	  $original_file='/upload/'.$file_name;
          $small_file = resize($new_name);
          // тут сохранение в БД SQL запросов


    	} else {
         echo "Error! Не удалось загрузить файл на сервер!";
         exit;
    	}
    // возвращаю миниатюру картинки в наш JS
    // исправь на  echo '<      // [баг с выводои img тега в код примера]
    echo <'img src="'.$new_name.'" class="img-rounded file_link_name">';

Файлы закачиваются на сервере, но данные из полей input name="title" и name="film" на передаются по POST в обработчик. Помогите пожалуйста.

Делал на основе этого https://frolenok-andrey.ru/ajax/ajax_download_image