難以使用輸入類型按鈕提交表單輸入文件類型使用ajax

Question

我在一個頁面上有兩種形式。我使用輸入類型按鈕和JavaScript函數來提交表單。按照要求正確提交第一種形式。但是，第二種形式並非如此。所以我使用ajax代碼來提交該表單。由於我是ajax的新手，所以我複製了代碼。該代碼工作有一些問題。問題是，如果我發佈文本，那麼這個工作很好，但如果我發佈照片或視頻意味着輸入類型文件，那麼它提交表單，但不發佈該文件類型數據。這裏是我的代碼，請幫我解決這個問題

<script> 
    function makeAjaxCall(){ 
     $.ajax({ 
      type: "post", 
      url: "<?php echo basic_url('time_line/create'); ?>", 
      cache: false,    
      data: $('#add_data').serialize(), 
      success: function(json){ 
      location.reload();     
      try{  
      var obj = jQuery.parseJSON(json); 
      alert(obj['STATUS']); 
    }catch(e) {  
      //alert('Exception while request..'); 
     }  
     }, 
     error: function(){      
      alert('Error while request..'); 
     } 
}); 
} 
</script> 

這裏是我的形式

<form action="<?php echo basic_url('time_line/create'); ?>" method="post" name="add_data" id="add_data" enctype="multipart/form-data"> 

       <span class="btn btn-success btn-file-image_upload" style="margin-left:0;" id="cap_photo"> 
       <i class="fa fa-image">Add Photo </i><input type="file" name="photo" id="photo" accept="image/*" onchange="readURL1(event)"> 
         </span> 
         <span class="btn btn-success btn-file-video_upload" id="cap_video"> 
           <i class="fa fa-video-camera">Add Video </i><input type="file" name="video" id="video" onchange="readURL2(event)"> 
         </span> 
        </div> 
       </div> 
       <textarea rows="2" class="form-control" style="margin-top:15px;" placeholder="Whats in your mind today?" name="description" id="description"></textarea> 
       </div><!--#caption--> 
       <div class="panel-footer"> 
      <input type="button" class="btn btn-success pull-right" value="Post" id="post" onClick="javascript:makeAjaxCall();"/> 
      <input type="button" class="btn btn-danger pull-right" id="abort" value="Cancel" onclick="reloadpg()" style="margin-right:2%;"/> 
         <ul class="nav nav-pills"> 
         </ul> 
       </div> 
       </form><br/> 

用戶可以添加2或以下字段的任何

Answer 1

嘗試使用此方法使用ajax發佈文件：

$('#upload').on('click', function() { 
     var file_data = $('#pic').prop('files')[0]; 
     var form_data = new FormData(); 
     form_data.append('file', file_data); 

     $.ajax({ 
       url   : 'upload.php',  // point to server-side PHP script 
       dataType : 'text',   // what to expect back from the PHP script, if anything 
       cache  : false, 
       contentType : false, 
       processData : false, 
       data  : form_data,       
       type  : 'post', 
       success  : function(output){ 
        alert(output);    // display response from the PHP script, if any 
       } 
     }); 
     $('#pic').val('');      /* Clear the file container */ 
    }); 

Answer 2

我認爲這應該對你有所幫助。

$('#upload').on('click', function() { 
     var file_data = $('#pic').prop('files')[0]; 
     var form_data = $('#add_data').serialize(); // fetching form data 
     form_data.append('file', file_data); // adding file 

     $.ajax({ 
       url   : 'upload.php',  
       dataType : 'json',   
       cache  : false, 
       data  : form_data,       
       type  : 'post', 
       success  : function(response){ 
        alert(JSON.stringify(response));   
       } 
     }); 
     $('#pic').val('');      /* Clear the file container */ 
    });