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发布文件：

resourceChanged()

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 */
    });

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

2 个答案: