入力タイプのボタンでajaxを使用してフォーム入力ファイルタイプを送信するのが難しい

Question

1つのページに2つのフォームがあります。私は入力フォームのボタンとJavaScript関数を使用してフォームを送信しています。最初のフォームは要件ごとに正しく提出されています。しかし、2番目の形式ではありませんでした。だから私はそのフォームを提出するために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 */ 
    });