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

我试图使用jquery表单，但它在concole 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>");

                }
            });

$（“#申请表格”）.ajaxForm({
beforeSend:function（）
{
$（“#进度”）.show（）；
//清除一切
$（“#bar”）.width（'0%）；
$（“#消息”）.html（“”）；
$（“#百分比”）.html（“0%”）；
},
上载进度：功能（事件、位置、总数、完成百分比）
{
$（“#条”）.width（完成百分比+'%'）；
$（“#百分比”）.html（完成百分比+'%'）；
},
成功：函数（）
{
$（“#bar”）.宽度（'100%）；
$（“#percent”）.html（'100%）；
},
完成：功能（响应）
{
$（“#message”）.html（“+response.responseText+”）；
},
错误：函数（）
{
$（“#message”）.html（“错误：无法上载文件”）；
}
});

这是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>

简历：
求职信：
0%

我在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>

---

我还使用jqueryui。这可能是问题所在吗？

您正在加载jQuery两次。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>

...

正是这第二个

jquery-1.9.1

没有得到

.ajaxForm

。用一个或另一个

---

将表单jquery添加到脚本底部

我设计了一个很好的上传程序，如下所示：

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

$('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.');
    }

    }); 

---

用这个，工作就完成了

<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>

---

ajaxForm不是函数

基本上是指函数不存在或函数在某个地方有问题

---

我通过对插件加载/路径和js文件进行排序修复了这个问题。在我的例子中，由于顺序错误，无法调用该函数。

jQuery本身也正确加载了吗？你能用你的HTML制作一个

jsfiddle

吗？是的。并且它是在jquery出现控制台中的任何其他错误之前加载的

$（）。浏览器检查器中的ajaxForm

返回“ajaxForm函数？无任何其他错误”。就这个一汉克人。我没有意识到我包括了两次……第二次是来自jqueryui:）你的帖子让我节省了整整一天的时间，浪费了jQuery的两次加载。谢谢你不再有用了。改用这个：