表單提交多個數據與AJAX帖子

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