通过jquery.form插件上传文件

时间:2011-08-24 08:12:20

标签: javascript jquery html ajax file

我有关于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警报下(“意外错误:”+ textStatus); line被调用textStatus ='aborted'什么是不需要的,但是firefox正在下载这个JSON。此外,在firebug控制台中,它可以立即打印出来:

[jquery.form] state = uninitialized

我做错了什么?救命啊!

更新:

好吧,似乎传输由django模块管理 - 文件传输(服务器端),所以如果我尝试使用filetransfers处理程序(另一个操作链接)上传它可以工作 - 但仅限于Chromium。 Firefox仍然崩溃

UPDATE2:

似乎有人遇到了这个问题:http://crazytechthoughts.blogspot.com/2011/01/get-json-data-response-with-jquery-form.html

UPDATE3: 以上解决方案有效!

1 个答案:

答案 0 :(得分:0)

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

根据malsup评论

Added proposed fix to v2.91.

下载jQuery.form.js version 3.50

问题解决了我。