Question

好的，所以我在phonegap和jquery中有这个应用程序。这是它的作用。向用户显示表单，上传和图像，然后显示一个confim对话框。在确认对话框中，可以选择再次上载。现在看看在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());
});

表单使用ajax post提交多个数据

1 个答案: