передача файлов на сервер

223

22 октября 2017, 20:46

Рылся в гугле, и никак не мог найти передачу самого файла посредством <input type="file"> Были передачи имени, размера. Как добраться до данных выбранного файла? Чтобы если не передавать сам файл, то хотя бы передать его содержимое. Как добраться до данных в этом input

Answer 1

Ссылаясь на самого себя https://ru.stackoverflow.com/a/512748/191482, можно воспользоваться FormData для этих нужд

FormData - создает новые объект FormData, если проще - HTML-форму.

$(document).on('click', '#btn', function(){ 
    var formData = new FormData(); 
    formData.append("myFile", document.getElementById("file").files[0], 'chris1.jpg'); 
     
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", "index.php"); 
    xhr.send(formData); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form method="post" enctype="multipart/form-data" action=""> 
<input type="button" id="btn" value="GO" /> 
<input type="file" id="file" name="file" />

При клике на кнопку с id btn отправится запрос на сервер и передаст файл из инпута с идентификатором file

Также можно отправлять много файлов. Для этого требуется лишь в цикле добавить все файлы в форму и потом отправить через аякс.

var formdata = new FormData();
var filedata = document.getElementsByName("file");
var i = 0, len = filedata.files.length, file;
for (; i < len; i++) {
    file = filedata.files[i];
    formdata.append("file", file);
}

Конечно можно еще проще. Просто в конструктор FromData передать саму форму и запулить. Пример через jquery

$("form#data").submit(function(event){  
  event.preventDefault(); 
  
  // складируем форму в ......форму)) 
  var formData = new FormData($(this)[0]); 
  
  $.ajax({ 
    url: 'mySuperPuperURL.php', 
    type: 'POST', 
    data: formData, 
    async: false, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function (returndata) { 
      alert(returndata); 
    } 
  }); 
  
  return false; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="data"> 
  <input type="hidden" name="id" value="123" readonly="readonly"> 
  User Name: <input type="text" name="username" value=""><br /> 
  Profile Image: <input name="profileImg[]" type="file" /><br /> 
  Display Image: <input name="displayImg[]" type="file" /><br /> 
  <input type="submit" value="Submit"> 
</form>