Ajax с использованием загрузки файла

Question

Я создаю почтовую страницу для отправки писем. Мне нужно прикрепить файл перед отправкой. Как я могу сделать это с помощью AJAX? Сначала мне нужно сохранить эти файлы на сервере, а затем я должен отправить почту. Эти действия выполняются с помощью одной кнопки отправки.

Answer 1

Проверьте эти вопросы:

• Загрузка файлов JavaScript
• Как я могу получить Gmail-подобные загрузки файлов для моего веб-приложения?
• Какой лучший загрузчик файлов JavaScript / Flash для нескольких файлов?

Answer 2

Посмотрите на фрагмент ниже, который отправляет текстовые данные и прикрепленные файлы. Вcontent-type='multipart/form-data' устанавливается браузером автоматически, имя файла также автоматически добавляется в filename Параметр FormData (и может быть легко прочитан сервером).

async function sendEmail() {
  let formData = new FormData();
  let msg = { message: emailText.value };
 
  formData.append("email", JSON.stringify(msg)); 
  [...attachment.files].map( (file,i) => formData.append("file"+i, file) );

  try {
    await fetch('your/api/upload/email', { method: "POST", body: formData });
    alert("Email was send!");
  } catch(e) {
    alert("Problem with email sending");
  }
}

<textarea id="emailText" placeholder="Type message here"></textarea><br>

<input type="file" id="attachment" multiple /><br><br>
<input type="button" value="Send email" onclick="sendEmail()" />

<br><br><span style="color:red">In this snippet API not exists so exception will be thrown but you can look on your request in:<br> chrome console> network tab</span>

Answer 3

Вы должны динамически создать скрытый iframe в вашей DOM и установить цель вашей формы загрузки на этот iframe. Не забудьте установить метод формы POST.

Вы можете одновременно загружать и заполнять поля сообщений.

Вы должны обязательно проверить готовые компоненты, делающие это для выбранной вами библиотеки javascript.

Answer 4

Я надеюсь, вы знаете, как сделать нормальную загрузку. Вызовите загрузку / чтение и обновление файла при нажатии кнопки с помощью вызова ajax. Вы должны отправить путь к локальному системному файлу в качестве входных данных, а затем ответ должен содержать путь на сервере или ошибку. Обновите ссылку на вложение с ответом на случай, если ошибок нет.