6

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

4
  • php.su/phphttp/?uploads
    – bderevyaga
    22 апр 2016 в 13:41
  • Это я находил. У меня $_FILES$GLOBALS даже нет намека на передаваемые мной данные) в принимающем скрипте пустой. Мне нужно, только средствами ДжаваСкрипта отправить содержимое файла.
    – WaldeMar
    22 апр 2016 в 13:45
  • Вот тут обсуждался способ отправки файлов средствами ДжаваСкрипт
    – lexxl
    22 апр 2016 в 13:59

2 ответа 2

6

Ссылаясь на самого себя 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>

0
let file = document.getElementById('inpute-type-file-id').files[0];
let formData = new FormData();
formData.append('stringKeyToGetValue', file);

$.ajax({
   url: 'your/url/address/here.html',
   method: 'post',
   data: formData,
   contentType: false,
   processData: false,
   success: (response) => {
   //...
   },
   error: (response) => {
   ...
   }
})

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.