使用带有输入类型按钮的ajax提交表单输入文件类型时遇到困难

Question

I have two forms on one page. I am using input type button and javascript function to submit the form. First form is being submitted correctly as per requirements. However, second form was not. So I used ajax code to submit that form. As I am new to ajax so I copied the code. That code worked having some issue. Issue is if I post text then this works great but if I post photo or video means input type file then its submitting the form but not posting that file type data. Here is my code please help me to solve this problem

<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>

here is my form

<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/>

user can add 2 or anyone of the following fields

Answer 1

Try this to post file using 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

I think it should be help to you.

$('#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 */
    });