使用Ajax上传文件

Question

我正在创建一个邮件页面用于发送邮件。在发送之前，我需要附加一些文件。如何使用AJAX实现这一点？最初，我需要将这些文件存储在服务器上，然后再发送邮件。这些操作都在一个“发送”按钮中完成。

- praveenjayapal

Answer 1

请查看以下问题：

• JavaScript 文件上传
• 如何获得类似 Gmail 的文件上传功能，用于我的 Web 应用程序？
• 什么是最好的多文件 JavaScript / Flash 文件上传器？

- CMS

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>

- Kamil Kiełczewski

Answer 3

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

- Techmaddy

---

如果你需要一个基本的Ajax参考，http://techmaddy.blogspot.com/2008/01/for-those-who-feel-ajax-is-diffcult-to.html - Techmaddy

Answer 4

你应该在DOM中动态创建一个隐藏的iframe，并将上传表单的目标设置为这个iframe。不要忘记将表单方法设置为POST。

你可以一次完成上传和消息字段填充。

你应该确保检查你选择的JavaScript库中是否有准备好的组件来完成这个任务。

- miceuz