通过ajax将文件上传到php

我的表单使用javascript警报与用户进行通信，因为这是我工作的公司的首选方法（而不是与php处理程序文件之间的常量重定向）。

因此，我通过jquery中的一些简单validation传递所有表单数据，并通过ajax将其发送到php处理程序。 这是我如何做的基本看法……

var first_name = $(sender + ' #first_name'); var email = $(sender + ' #email'); var tel = $(sender + ' #telephone'); var comments = $(sender + ' #comments'); $.ajax({ type: 'POST', url: 'sendmail.php', data: { first_name: first_name.val(), email: email.val(), telephone: tel.val(), comments: comments.val(), success: function clearFields() { first_name.val(''); email.val(''); tel.val(''); comments.val(''); alert('Thank you. We will contact you as soon as possible.'); } } }); 

已将文件输入字段添加到如下所示的一个表单中，我在上载时遇到问题。 虽然电子邮件发送正确，但我认为ajax不会将上传的任何可用数据发送到php文件

   var upload = $("#upload"); $.ajax({ type: 'POST', url: 'sendmail.php', data: { first_name: first_name.val(), email: email.val(), telephone: tel.val(), upload: upload.val(), comments: comments.val(), success: function clearFields() { first_name.val(''); email.val(''); tel.val(''); upload.val(''); comments.val(''); alert('Thank you. We will contact you as soon as possible.'); } } });  

我已经为此找到了许多选项，但是我所看到的所有这些选项对我来说都是“hackish”。

有更简单的方法吗？

Answer 1

你必须通过IFrame这样做

所以你创建了一个隐藏的iframe

然后，您创建一个带有某个按钮和您希望拥有的所有字段的表单

然后在uploadscript.php中，您可以使用所有表单值，就像它们是常规的$ _POST值一样：

这几乎与使用AJAX一样。

Answer 2

Ajax不支持文件上载操作。 但是有许多插件利用iframe异步上传文件。 您可以在此处阅读有关此技术的更多信息

支持表单上传的jQuery插件很少
1. jQuery表单
2. jQuery-File-Upload

在很多问答网站上都有很多问题的答案，比如这个问题 。

这里讨论使用html 5的另一种解决方案，它使用FormData。