9

我使用 jQuery Malsup 插件在 ajax 中发布表单数据。 http://malsup.com/jquery/form/#api

该表单包含文本数据和文件数据（图像上传字段）。我曾经ajaxSubmit()发布表单数据。所有数据都在服务器站点的 php 中处理。

它在 chrome、FF、IE8、IE9 中运行良好。如果我不选择任何图像上传字段，则 ajax 请求可以正常工作 IE10。But when an image is selected IE10 shows pending in its dev tools.

您可以在此处测试文件上传功能。

http://malsup.com/jquery/form/#file-upload

4

2 回答 2

1

无论表单是通过 GET 还是 POST 提交，IE 都没有办法将文件数据转换成可以传输到服务器的文本字符串。

为了在不重新加载页面的情况下执行文件 POST，您需要以下对象：FormData、XHR.upload、File.files。“XHR”是 xmlHTTPRequest 对象，“File”是文件选择器的 DOM 实例。

如果上述任何一项不受支持，您可以回退到常规形式的 POST：

if (!self.FormData||!xhr.upload||document.getElementById('file').files) {
  document.getElementById('form').submit();
  return;
}

然后按如下方式获取表单数据：

var fd=new FormData();
fd.append('file',document.getElementById('file').files[0]);
xhr.open('POST',...); //complete your Ajax post here
xhr.send(fd); //the form data is sent here, with the file

既然我已经解释了 Ajax 文件 POST 的机制，那么您的插件可能已经在处理不能具有 2 级 XHR 功能的浏览器。嵌入插件时，请确保它位于 iFrame 中。如果您想在文件完全上传时通知主页，请在上传处理程序本身中嵌入 JavaScript 调用：

parent.doneuploading();

，其中 doneuploading 是在包含页面中定义的 JavaScript 函数。

还值得注意的是 

enctype="multipart/form-data"

在表单标签中。

于 2014-01-19T03:59:23.663 回答
0

我遇到了同样的问题，我的成功函数不会在 ajaxSubmit 上被调用。我最终查看了 jquery forms 插件代码，如果您没有指定form method="post" ，第 65 行会强制您的 ajaxSubmit 使用 GET 。如果您的表单相当大，则获取将失败。所以解决方法是在表单元素上使用 method="post" 。

于 2013-12-30T23:35:19.843 回答