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

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

Answer 4

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

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

您绝对应该检查为您选择的 javascript 库执行此操作的就绪组件。