如何使用 Dajaxice 发送文件数据？答案

【问题标题】：how to send file data using Dajaxice?如何使用 Dajaxice 发送文件数据？
【发布时间】：2013-05-10 00:23:03
【问题描述】：

我正在为我的网站使用 ajax。我已成功使用jQuery.ajax() 将文件异步上传到服务器。我正在使用Dajax 和Dajaxice，因此我也计划将这些应用程序用于文件上传。我试过this 例子。它工作正常。但是，如果我将文件字段添加到我的 html 表单中，它不会将文件发送到服务器。我的 html 表单看起来像

<form id="myform" action="/file/" method="post" enctype="multipart/form-data">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='AaSmyBEwQLSD3YghRAD9Cf2uxEjzESUe' /></div>
<p><label for="id_docfile">Select a file</label> max. 42 megabytes</p>
<p><input type="file" name="docfile" id="id_docfile" /></p>
<p><input type="submit" value="Upload" /></p>
</form>

这个问题在很多地方都被问过，但从来没有回答过。

【问题讨论】：

有没有人能够回答这个/找到解决方案？
@scriptdiddy 还没有！

标签： ajax jquery dajaxice dajax

【解决方案1】：

我最近也遇到了这个问题。所以，我挖了一点，发现了一些答案。

它工作正常。但是如果我将文件字段添加到我的 html 表单中，它不会将文件发送到服务器。

文档示例中使用了serialize() 方法。但是根据jQuery doc：

文件选择元素中的数据未序列化。

此外，没有明确的方式来获取 ajax 文件上传，因为 JS 无法访问客户端浏览器的外部。所以，我认为不可能使用dajaxice。

我发现最简单的方法是使用target 选项将表单发布到不可见的 iframe：

<form method='POST' action='/upload' enctype='multipart/form-data' target='submit-iframe'>

所以，只有 iframe 会被刷新。使用 js，您可以从它捕获 load() 事件中获取数据。

更详细的过程描述here

【讨论】：

创建一个 iframe 并从其中发布一个表单是所有非 Flash Ajax/Javascript 解决方案的工作方式，dwr 做同样的事情，请参阅：directwebremoting.org/dwr-demo/simple/upload.html。这与用于反序列化（如在美味派中使用的）文件的 python 代码相结合，可以方便地添加到 dajaxice。

【解决方案2】：

Afaik 目前在 dajax / dajaxice 中没有规定上传文件。

我在几个项目中使用了 dajax，并通过使用 blueimp/jquery-file-upload 和一个 django 视图来解决这个问题，该视图接受上传文件的 POST 并将 JSON 字符串返回给客户端。

这不是一个完美的解决方案，尤其是因为 jquery-file-upload 按钮的样式与普通 html 表单元素的样式不同，可以使用 jQuery-ui 设置整个表单的样式，尽管这是很多额外的工作.

dwr 几乎是 Java 的 dajax 和 django 的 tasty pie 都提供文件上传，所以理论上应该可以实现它。

如果有人觉得我的 ajax 解决方案有用，我很高兴发布一个示例。

【讨论】：