Ajax 使用文件上传答案

【问题标题】：Ajax using file uploadAjax 使用文件上传
【发布时间】：2010-10-04 21:08:40
【问题描述】：

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

【问题讨论】：

【解决方案1】：

看看下面的 sn-p 发送文本数据和附加的多文件。 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>

【讨论】：

【解决方案2】：

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

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

您绝对应该为您选择的 javascript 库检查准备好的组件。

【讨论】：

【解决方案3】：

检查这些问题：

【讨论】：

【解决方案4】：

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

【讨论】：

如果您需要基本的 Ajax 参考，techmaddy.blogspot.com/2008/01/…