jQuery表单不按预期工作。ajaxForm不是一个函数。

Question

我想使用jquery form，但在控制台中显示ajaxForm不是一个函数。已正确包含jquery.form.js文件，并将代码放置在文档准备好的函数中...

以下是脚本内容：

$("#apply-form").ajaxForm({

                beforeSend: function()
                {
                    $("#progress").show();
                    //clear everything
                    $("#bar").width('0%');
                    $("#message").html("");
                    $("#percent").html("0%");
                },
                uploadProgress: function(event, position, total, percentComplete)
                {
                    $("#bar").width(percentComplete+'%');
                    $("#percent").html(percentComplete+'%');

                },
                success: function()
                {
                    $("#bar").width('100%');
                    $("#percent").html('100%');

                },
                complete: function(response)
                {
                    $("#message").html("<font color='green'>"+response.responseText+"</font>");
                },
                error: function()
                {
                    $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

                }
            });

以下是HTML表单：

<form id="apply-form" enctype="multipart/form-data" method="post" action="">


    <table>
                <tr><td>CV:</td>
                    <td>
                        <input type="file" name="cover">
                    </td>
                </tr>
                <tr><td>Cover Letter:</td>
                    <td>
                        <input type="file" name="curriculum">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="progress">
                            <div id="bar"></div>
                            <div id="percent">0%</div >
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="message"></div>
                    </td>
                </tr>
            </table>
        </form>

我正在使用CodeIgniter创建网站，我有一个页头模板，它包含在每个页面中。在部分，我按照以下顺序包含了所有脚本：

<script src="/jobs/public/js/jquery.js"></script>
<script src="/jobs/public/js/jquery.form.js"></script>
<script src="/jobs/public/js/javascript.js"></script>
<link href="/jobs/public/js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

我也在使用jQuery UI，这可能是问题的原因吗？

- Beniamin Szabo

---

jQuery本身是否正确加载？ 您能否在jsfiddle上添加您的HTML代码？ - Ofir Israel

不要有任何其他错误。 - Beniamin Szabo

当文档准备就绪时，可能尚未加载ajaxForm库，您可以在Chrome的网络选项卡中找到它，或查看检查器的控制台。 - Jai

你能告诉我们你是在哪里以及如何加载这些脚本吗？ - user1409909

在火狐浏览器的Firebug插件中，在脚本部分可以看到已经引入了jquery.form.js文件。 - Beniamin Szabo

Answer 1

你正在重复加载jQuery。第二次加载会覆盖第一次加载并破坏任何插件。

<script src="/jobs/public/js/jquery.js"></script>
<script src="/jobs/public/js/jquery.form.js"></script>
...
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>

未能运用 .ajaxForm 方法是因为使用了第二个名为 jquery-1.9.1 的文件。建议只使用其中一个。

将表单的jquery文件添加到脚本底部。

- Explosion Pills

---

谢谢，我没意识到我把它包含了两次...第二个是来自jQuery UI :) - Beniamin Szabo

你的帖子让我省了一整天的时间浪费，检测到了jQuery的双重加载。谢谢！ - Smith

Answer 2

使用此工具，工作完毕

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>

- Gautam

---

不再起作用。请改用以下代码：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script> - kpaul

Answer 3

我设计了一个非常好用的上传器，就像这样：

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.form.js"></script>

并且完成了工作并像这样使用了ajax：

$('form').ajaxForm
    ({

    beforeSend: function() 
    {
    var percentVal = '20%';
    prog.css("width",percentVal);

    },
    uploadProgress: function(event, position, total, percentComplete) 
    {
    var percentVal = percentComplete + '%';

    prog.css("width",percentVal);
    darsad.html(percentVal + ' uploading .');
    //console.log(percentVal, position, total);
    },
    success: function() 
    {
    var percentVal = '100%';

    darsad.html(percentVal + ' uploaded success.');
    prog.css("width",percentVal);

    },
    complete: function(xhr) 
    {
    //status.html(xhr.responseText);
    darsad.html(percentVal + ' uploaded complete.');
    }

    }); 

- barnameha

Answer 4

ajaxForm不是一个函数基本上意味着，要么该函数不存在，要么该函数存在问题。

我通过重新排序插件加载/路径和js文件来解决这个问题。在我的情况下，由于顺序错误，无法调用该函数。

- Asyraf Roszaki