jquery 양식이 예상대로 작동하지 않습니다.ajaxForm이 함수가 아닙니다.

jquery 양식이 예상대로 작동하지 않습니다.ajaxForm이 함수가 아닙니다.

저는 jquery 양식을 사용하려고 하는데, colle 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>

저는 코드기로 사이트를 만들고 있으며 모든 페이지에 포함된 헤더 템플릿을 가지고 있습니다.헤드 섹션에는 다음과 같은 순서로 모든 스크립트가 포함되어 있습니다.

<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를 사용하고 있습니다.그게 문제일까요?

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

저는 이렇게 좋은 업로더를 디자인했습니다.

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

    }); 

ajaxForm is not a function기본적으로 함수가 존재하지 않거나 어딘가에 문제가 있다는 것을 의미합니다.

플러그인 로드/경로와 js 파일을 정렬하여 수정하였습니다.제 경우에는 주문이 잘못되어 기능을 호출할 수 없습니다.

언급URL : https://stackoverflow.com/questions/18614240/jquery-form-not-working-as-expected-ajaxform-is-not-a-function