使用帶有輸入類型按鈕的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 */
    });