Question

我正在创建发送邮件的邮件页面。我需要在发送之前附加一些文件。我怎么能用AJAX做到这一点？最初我需要将这些文件存储在服务器中然后我必须发送邮件。这些操作只需一个发送按钮即可完成。

Answer 1

检查以下问题：

Answer 2

我希望你知道如何正常上传。使用ajax调用单击按钮时，调用上载/读取和更新文件。您必须将本地系统文件路径作为输入发送，然后响应应包含服务器中的路径或错误。如果没有错误，请使用响应更新附件链接。

Answer 3

您应该在DOM中动态创建隐藏的iframe，并将上传表单的目标设置为此iframe。别忘了将form方法设置为POST。

您可以一次性完成上传和消息字段填写。

你一定要检查准备好的组件，为你选择的javascript库做这件事。

Answer 4

查看以下发送文本数据和附加的多文件的代码段。 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>

Ajax使用文件上传

4 个答案: