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