Как прочитать файл в момент отправки?

Question

[AlexandrMa]

Файл надо отправить ajaxом, BLOB. Сейчас файл считываю в момент добавления в форму, результат сохраняю в поле hidden. Криво, но пока только так осилил.
Сделать чтение файла в момент самой отправки (button) я так и не смог. Из-за того что FileReader асинхронный и запутался с коллбеками. Как переписать мой код, чтобы избавиться от

document.getElementById('file').addEventListener('change', function (e){
});

а весь код чтения добавить в функция send()?

<form method="post" action="#">
<input type="text" id="name">
<input type="text" id="price">
<input type="file" id="file">
<input type="hidden" id="file_data">
<input type="button" value="Send" onclick="send()">
</form>

function send(){

  let data = {
    name: document.getElementById('name').value,
    price: document.getElementById('price').value,
    file: document.getElementById('file_data').value
  };

  console.log(data);
  
}


document.getElementById('file').addEventListener('change', function (e){
  let file = e.target.files[0];
  let reader = new FileReader();
  reader.onload = (function (file) {
    return function (e) {
      let r = e.target;
      document.getElementById('file_data').value = r.result;
    };
  })(file);
  reader.readAsDataURL(file);
});

Comments

[Надим]

Ничего не понятно. Зачем вы пытаетесь прочитать файл, если нужно просто отправить его? И зачем читать именно в момент отправки, да ещё добавлять что-то куда-то? Я готов помочь, но сначала понять бы что вы там пытайтесь сотворить.

[AlexandrMa]

Надим Закиров, Мне надо отправить POST на сервер. В поля name и price я вписывают название и цену. Пока всё просто.

Далее выбираю файл, который тоже надо отправить и я хочу, чтобы FileReader сработал не тогда, когда я прикрепил файл, а когда нажал кнопку отправить.

<input type="button" value="Send" onclick="send()">

Иными словами тут должно быть так

function send(){

  let data = {
    name: document.getElementById('name').value,
    price: document.getElementById('price').value,
  };

  //если файл добавлен в поле input file то вызвать FileReader и результат его работы запихать вот сюда
  //data.file = результат FileReader

  console.log(data);
}

[FeST1VaL]

ну вы можете проверять на серверной части куда вы отправляете его. Если пришел файл $_FILES то обрабатывайте

[Надим]

AlexandrMa, я правильно понимаю, что используя FileReader вы пытайтесь файл из одного поля вставить в другое поле?

[AlexandrMa]

Надим Закиров, да, но мне бы используя FileReader добавить переменную
data.file = result_FileReader;
к общему объекту

let data = {
    name: document.getElementById('name').value,
    price: document.getElementById('price').value,
  };

[AlexandrMa]

Надим Закиров, rороче, надо весь код отсюда

document.getElementById('file').addEventListener('change', function (e){
  //этот код
});

перетащить в send()
без использования промежуточного поля hidden

[Надим]

AlexandrMa, зачем вам нужен это общий объект?

[AlexandrMa]

Надим Закиров, ну потому что в ajax улетают все данные. name, price и картинка в виде blob

[Надим]

AlexandrMa, понятно. Вы изначально криво сформировали вопрос. Фактически вам банально надо собрать данные только с конкретных нужных вам полей и отправить их одним единым AJAX-запросом? Верно?

[AlexandrMa]

Надим Закиров, ну конечно. просто я не разобрался как результат работы FileReader сохранить в переменную. В инете много примеров, где через callback данные сохраняются. А я не настолько крут в этом языке, чтобы осилить такое)

[Надим]

AlexandrMa, хорошо, я наконец понял, что вы хотите. Теперь идем дальше. Файл вы хотите отправить целиком, как есть или только текст из файла, словно он в блокноте открыт?

[AlexandrMa]

Надим Закиров, да решение то уже написали ниже. там не всё так просто было.

Answer 1

[Tim]

Comments

[AlexandrMa]

спасибо. вот это код)))) теперь его разбирать