15

我正在尝试使用 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>");

                }
            });

这是 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 制作网站，并且我有一个包含在每个页面中的标题模板。在 head 部分中，我按以下顺序包含了我的所有脚本：

<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。这可能是问题吗？

4

4 回答 4

27

您正在加载 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 添加到脚本的底部

于 2013-09-04T13:18:10.353 回答
10

使用它，工作就完成了

<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>
于 2015-04-06T14:20:58.933 回答
3

i designed a good uploader just like this :

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

and worked complete and used ajax just like this :

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

    });
于 2013-10-15T23:11:05.130 回答
0

ajaxForm is not a function basically means, either the function does not exist or the function has problems somewhere.

I fixed this by sort back the plugin load/ path and js file. In my case, the function can't be called because the order is wrong.

于 2021-02-16T02:16:11.237 回答