Форма отправляет несколько данных с постом ajax

Question

Хорошо, поэтому у меня есть это приложение в PhoneGap и JQuery.Вот что он делает.показывает пользователю форму, загружаемые файлы и изображения, а затем показывает диалоговое окно подтверждения.В диалоговом окне подтверждения есть возможность загрузить снова.Теперь, видя, как это все в jquery и jqMobile, это всего лишь одна страница.

Когда я отправляю закачку в первый раз, она отлично работает.Когда я загружаю его второй раз, он запускает пост дважды.Я разместил код ниже.Это как что-то не устанавливается.

function sendImage(src) {

    // comming from library or camera
    src = (src == 'library') ? Camera.PictureSourceType.PHOTOLIBRARY : Camera.PictureSourceType.CAMERA;

    // get the image from phone
    navigator.camera.getPicture(success, fail, {quality: 45, sourceType: src});

    // got image no fuckin display it
    function success(imageData) {
        //var params = {image: imageData};
        $('#u_image').attr('src', 'data:image/jpeg;base64,' + imageData);
        $('#image').val(imageData); //image info do not add base64 or it will be unreadable when uploaded
        // send the data
        $('#upload_form').submit(function(event){
            var isConnected = checkConnection();
            if(isConnected == 1){
                event.preventDefault();
                var data = $(this).serialize();//SET THE POST DATA
                alert('uploading');
                //POST FORM TO SERVER AND GET 1 OR 0
                $.ajax({
                    type: 'POST',
                    url: 'http://site.com/index.php/mobile/do_image',
                    data: data,
                    dataType: 'json',
                    crossDomain:true,
                    cache:false,
                    success: function(response) {
                        if(response == 1) {
                            $('#image').val('');
                            $('#title').val('');
                            $('#u_image').attr('src', '');
                            $('#description').val('');
                            $.mobile.changePage("#confirm");
                        }//END SUCCESS
                        else { 
                            $('#image').val('');
                            $('#title').val('');
                            $('#u_image').attr('src', '')
                            $('#description').val('');
                            alert('There was an error. Please Try again');
                        }
                    }
                });//ENDS THE AJAX CALL
                return false;
            }// End if for connection check
            else {
                //not connected? go to login page
                $('#image').val('');
                $('#title').val('');
                $('#u_image').attr('src', '')
                $('#description').val('');
                $('#username').val('');
                document.location.href="#login_sec";
                alert('You are NOT connected to the internet!'); 
            }
        });     
    }

    function fail(message) { alert(message); }
}

$('.send-image').click(function () {
    sendImage($(this).val());
});

Answer 1

Проблема в том, что вы связываетесь с событием submit для вашей формы внутри функции, которая запускается более одного раза. Переместите код $('#upload_form').submit(function(event){...}); за пределы функции sendImage, чтобы он связывался только один раз.

Попробуйте это:

function sendImage(src) {

    // comming from library or camera
    src = (src == 'library') ? Camera.PictureSourceType.PHOTOLIBRARY : Camera.PictureSourceType.CAMERA;

    // get the image from phone
    navigator.camera.getPicture(success, fail, {quality: 45, sourceType: src});

    // got image no fuckin display it
    function success(imageData) {
        //var params = {image: imageData};
        $('#u_image').attr('src', 'data:image/jpeg;base64,' + imageData);
        $('#image').val(imageData); //image info do not add base64 or it will be unreadable when uploaded
        // send the data (NOTICE that I trigger the submit event here rather than binding code to the submit event)
        $('#upload_form').trigger('submit');
    }

    function fail(message) { alert(message); }
}

//NOTICE I have moved this code outside the function it was in so that it only binds once (you won't get multiple events firing this way)
$('#upload_form').submit(function(event){
    var isConnected = checkConnection();
    if(isConnected == 1){
        event.preventDefault();
        var data = $(this).serialize();//SET THE POST DATA
        alert('uploading');
        //POST FORM TO SERVER AND GET 1 OR 0
        $.ajax({
            type: 'POST',
            url: 'http://site.com/index.php/mobile/do_image',
            data: data,
            dataType: 'json',
            crossDomain:true,
            cache:false,
            success: function(response) {
                if(response == 1) {
                    $('#image').val('');
                    $('#title').val('');
                    $('#u_image').attr('src', '');
                    $('#description').val('');
                    $.mobile.changePage("#confirm");
                }//END SUCCESS
                else { 
                    $('#image').val('');
                    $('#title').val('');
                    $('#u_image').attr('src', '')
                    $('#description').val('');
                    alert('There was an error. Please Try again');
                }
            }
        });//ENDS THE AJAX CALL
        return false;
    }// End if for connection check
    else {
        //not connected? go to login page
        $('#image').val('');
        $('#title').val('');
        $('#u_image').attr('src', '')
        $('#description').val('');
        $('#username').val('');
        document.location.href="#login_sec";
        alert('You are NOT connected to the internet!'); 
    }
});     


$('.send-image').click(function () {
    sendImage($(this).val());
});