通过 jquery.form 插件上传文件答案

【问题标题】：Uploading files through jquery.form plugin通过 jquery.form 插件上传文件
【发布时间】：2011-08-24 08:12:20
【问题描述】：

我有以下用于 ajax 文件上传的 html 文档：

<html> 
<head> 
    <script src="jquery.js" type="text/javascript"></script> 
    <script src="jquery.form.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
       $(document).ready(function() {
           $('#file_upload_form').ajaxForm({
               success: function(data, textStatus, jqxhr) {
                 if (data.redirect)
                    window.location.replace(data.redirect);
                 else
                    alert(data.text);
               },
               error: function(jqXHR, textStatus, errorThrown) {
                  alert("unexpected error: " + textStatus);
               },
               dataType: "json",
           });
       });  
    </script> 
</head> 
<body> 
   <form id="file_upload_form" action="http://apddr/pl/administration/test/" method="post" enctype="multipart/form-data"> 
            <table class="grey" id="file_table"> 
                <tr> 
                    <th colspan="2"> 
                        Add file
                    </th> 
                </tr> 
                <tr> 
                    <td style="vertical-align: top; width: 10em;" class="strong"><label for="id_file">File name:</label></td> 
                    <td> 
                        <input type="file" name="file" size="50" id="id_file" style="background-color: initial;"/><br /> 
                    </td> 
                </tr> 
                <tr> 
                    <td class="strong"> 
                        <label for="id_language">Choose lang:</label> 
                    </td> 
                    <td> 
                        <select id="id_language" name="language"> 
                            <option value="">-- no language --</option> 
                            <option value="ANG">english</option> 
                            <option value="NIE">german</option> 
                        </select> 
                    </td> 
                </tr> 
                <tr> 
                    <td class="strong"><label for="id_description">Description:</label></td> 
                    <td> 
                        <input class="text" type="text" name="description" maxlength="300" id="id_description" style="width: 100%;"/><br /> 
                    </td> 
                </tr> 
                <tr> 
                    <td class="strong"></td> 
                    <td class="strong" style="text-align: right"> 
                        <input type="submit" class="submit" name="addFile" value="Send" /> 
                    </td> 
                </tr> 
            </table> 
        </form> 
    </body> 
</html>

调用 http://apddr/pl/administration/test/ 返回 application/json '{'text': 'test'}'。

在 Chromium 下 alert("unexpected error: " + textStatus);使用 textStatus='aborted' 调用不需要的行，但 Firefox 正在下载此 JSON。此外，在 firebug 控制台中，它会立即打印：

[jquery.form] state = uninitialized

我做错了什么？救命！

更新：

好的，看来传输是由 django 模块管理的 - 文件传输（服务器端），所以如果我尝试使用文件传输处理程序（另一个操作链接）上传它可以工作 - 但仅在 Chromium 下。 Firefox 仍然崩溃

更新2：

好像有人越过了这个问题：http://crazytechthoughts.blogspot.com/2011/01/get-json-data-response-with-jquery-form.html

更新3： 上述解决方案有效！

【问题讨论】：

只是一个猜测......最后写你的脚本......意味着在你的html之后。
文档准备好后调用
你在dataType: "json"之后多了一个','
是的，但没有任何改变。

标签： javascript jquery html ajax file

【解决方案1】：

GitHub 解决方案： never ending loop with blank file input (patch included)

根据malsup评论

Added proposed fix to v2.91.

下载jQuery.form.js version 3.50

问题为我解决了。

【讨论】：