Как передать файл или содержимое файла на сервер

#javascript

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

Ответы

Ответ 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);
});








При клике на кнопку с 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;
});



  
  User Name: 

  Profile Image: 

  Display Image: