FormData передача input type file на сервер через ajax

Рубрика: jQuery, Дата: 30 June, 2017, Автор:
Tags:

Передача input type file на сервер через ajax делаем через FormData, передаем ему id формы, как то так var formData=new FormData($(“#form-id”)[0]); .

Описание проблемы

В общем морочная фигня получилась, обычно я передаю данные на сервер самостоятельно формируя data. Но когда нам нужно передать файл обычная передача уже не прокатывает. Хотя она наверно и не обычная, я просто привык делать так. Возможно через этот объект FormData будет делаться и все остальное легче. Просто синтаксис не сильно привычный.  Короче передать нужно было три файла на сервер. Сделаем тестовый простой примерчик ниже.

FormData передача input type file . Рассмотрение примерчика.

И так у нас есть сразу приведу код

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>

<form id="form-id" action="/handler.php" method="POST" enctype="multipart/form-data">
  <input id="my_file" type="file" name="my_file">
  <br>
  <input id="my_name" type="text" name="my_name" value="my_name">
  <input id="submit" type="submit" nme="submit">
 </form>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script type="text/javascript">
 jQuery(document).ready(function($) {
  $("body").on('click', '#submit', function(event) {
  event.preventDefault();
  event.stopPropagation();

var formData=new FormData($("#form-id")[0]);
  formData.append("key", "value"); //insert additional value to array
  formData.set('my_name', 'm'); //change existing value in array
 

$.ajax({
  url: 'http://test/handler.php',
  type: 'POST',
  data: formData,
  processData: false, //allow send not only string
  contentType: false,
  async: false,// waiting till finished handling request

success: function(msg){
  console.log('msg='+msg);
  }
  });//end ajax
  });
 });

</script>

</body>
 </html>

В обработчике обычный вывод

handler.php

<?php 
 echo '<pre>';
 print_r($_POST);
 echo '</pre>';

 echo '<pre>';
 print_r($_FILES);
 echo '</pre>';

?>

Что происходит внутри?

Что тут происходит, вот эти строчки важно добавить.

processData: false, //allow send not only string
  contentType: false,

Не сильно вникал, но когда мы передаем и используем FormData передача input type file нужно эти две строчки добавлять. И еще там есть один параметр

async: false,// waiting till finished handling request

Эта штука вроде предотвращает отправку нескльких запросов одновременно.
Раз отправили и пока не придет ответ, второй запрос не будет отправлен.

Результат

От такая от фигня FormData передача input type file , короче мы получаем данные в консоли.

FormData передача input type file

Добавление и изменение в объекте FormData передача input type file

и так эта штука FormData которая возвращается объект ,  а не массив, поэтому там для добавления существует два метода set и append

formData.append("key", "value"); //insert additional value to array

formData.set('my_name', 'm'); //change existing value in array

 

Комментарии:


Оставить комментарий

Your email address will not be published. Required fields are marked *