使用 jQuery 和 Ajax 上传文件答案

【问题标题】：Upload file using jQuery and Ajax使用 jQuery 和 Ajax 上传文件
【发布时间】：2012-10-03 11:01:35
【问题描述】：

我有一个使用 jQuery $.post 方法发送到服务器的表单。我正在发送几个字段，例如：

var myName = "Pedro";
var myDescription = "Description of Pedro";

$.post("~/insert_user", { name: myName, description: myDescription }, function(data){
    alert("Successfully inserted " + data.name + " in DB");
}, "json");

这很好用，因为我将 insert_user.php 中的值处理并插入到数据库中。

如果我需要在表单中添加一个字段让用户上传图片怎么办？

我将如何在我的 $.post 调用中执行此操作，以及如何在 PHP 中获取它？

顺便说一句，我正在使用 Symfony2.0，以防万一它改变了一些东西。但重要的部分是如何在 ajax 调用中添加文件类型字段。

提前致谢。

佩德罗

【问题讨论】：

通过ajax将该图片的路径发送到insert_user.php并在那里执行file_upload
insert_user.php 将如何访问用户系统上的文件？
我不认为这是解决方案。

标签： php jquery ajax symfony

【解决方案1】：

您会发现使用预构建的 jquery 插件会容易得多。我最喜欢的是uploadify http://uploadify.com。

它简单易用，可以为您节省大量时间尝试找出自己的方法

$.post 与下面的代码块相同。为了让你做你需要做的事情，你需要改变它以至少使用它，然后事情会变得更简单。因此，首先将 $.post 更改为此

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

然后在 ajax 块 contentType 中添加一个参数：“multipart/form-data”或尝试 mimeType（记不太清楚）和数据中：$("#form").serialize()，应该可以。

如果它不起作用，请告诉我

--NEW EDIT LOL-- 请原谅我的盲目编码，您可能需要对此进行测试

我做了更多的研究并发现了这一点。您需要构建此数组并将其添加到 ajax 块中的数据中

var files = new FormData($('#fileinputid'));     
jQuery.each($('#fileinputid')[0].files, function(i, file) {
    files.append(i, file);
});

如果我读到的内容准确，您应该能够将该数组与其余的 ajax 数据一起传递。虽然我不完全确定如何将其添加到序列化数据中。

请对此进行测试并告诉我。如果它不起作用，请为您做一个完整的 javascript 脚本测试，然后将其发布在这里

【讨论】：

谢谢。但问题是如何将已经工作的 $.post 调用与提交文件（在这种情况下为图像）结合起来。我真的不知道该怎么做。
好的。现在我一切都变得更好了:)。好吧，我已经传递给 $.ajax 模型并且一切都在继续工作。所以第一阶段成功了。现在的问题是：（来自 jQuery 文档）“来自文件选择元素的数据未序列化。”所以当我去 $("#myForm").serialize() 时，它不会序列化图像数据。那么……还有什么其他建议吗？
非常感谢您的 cmets 和努力。我终于使用这个库将文件传递给服务器malsup.com/jquery/form/#faq。我准确地解释了我需要什么。再次非常感谢:)

【解决方案2】：

本教程可能会有所帮助：Nettuts+: Uploading Files With AJAX

【讨论】：

谢谢。但问题是如何将已经工作的 $.post 调用与提交文件（在这种情况下为图像）结合起来。我真的不知道该怎么做。

【解决方案3】：

制作 iframe 并将表单放入其中，提交表单并瞧。或者您可以使用其中一种AJAX File upload scripts

【讨论】：

谢谢。但问题是如何将已经工作的 $.post 调用与提交文件（在这种情况下为图像）结合起来。我真的不知道该怎么做。

【解决方案4】：

我终于用了这个：

http://malsup.com/jquery/form/#faq

它能很好地满足我的需要。

谢谢大家的帮助。

【讨论】：