ajax提交：數據庫重複輸入

Question

我在裏面有一個表單和一個輸入類型文件。

<form id='imageform' method='post' enctype='multipart/form-data' action='php/exec/add-message-image-exec.php' style='clear:both'> 
    <div id='imageloadstatus' style='display:none'><img src='assets/loader.gif' alt='Uploading....'/></div> 
    <div id='imageloadbutton'> 
     <div class='file-field input-field'> 
      <div class='btn'> 
       <span>Upload</span> 
       <input type='file' name='file' id='photoimg'/> 
      </div> 
      <div class='file-path-wrapper'> 
       <input class='file-path validate' type='text'> 
      </div> 
     </div> 
    </div> 
</form> 

它會在輸入文件中附加圖像時執行，並且ajax會自動處理並將其保存到數據庫中。

$(document).ready(function() { 
    $('#photoimg').on('change', function() { 
     var A = $('#imageloadstatus'); 
     var B = $('#imageloadbutton'); 

     $('#imageform').ajaxSubmit({target: '#preview', 
      beforeSubmit: function() { 
       A.show(); 
       B.hide(); 
      }, 
      success: function() { 
       A.hide(); 
       B.show(); 
      }, 
      error: function() { 
       A.hide(); 
       B.show(); 
      }}).submit(); 

    }); 
}); 

我的問題是，它提交圖像兩次，並將其保存到我的數據庫/表兩次。但是當我刪除腳本中的.submit();時，它只執行一次，但是有一個小模式窗口，並且每當我附加圖像/提交時都會出現另一個屏幕。

Answer 1

刪除'action'並將其放入ajax POST請求中。

$(document).ready(function() { 
    $('#photoimg').on('change', function() { 
    var A = $('#imageloadstatus'); 
    var B = $('#imageloadbutton'); 

    $.ajax({ 
     url: 'php/exec/add-message-image-exec.php', 
     type: 'POST', 
     data: $('#imageform').serialize(), 
     beforeSubmit: function() { 
      A.show(); 
      B.hide(); 
     }, 
     success: function (data) { 
      //do something with data 
      //ex: console.log() 
      console.log(data); 
      A.hide(); 
      B.show(); 
     }, 
     error: function() { 
      A.hide(); 
      B.show(); 
     } 
    }); 
    }); 
});