IT技术博客网IT技术博客网IT技术博客网

当前位置: 首页 > php开发

使用ajax无刷新提交表单FormData包含post文本和文件控制台获取完整代码示例

前端html代码

<script src="/public/admin/style/jquery-3.1.1.min.js"></script>

<script>  
        $(document).ready(function() {  
            $('#submit-form').submit(function(event) {  
                event.preventDefault();  
                var xingming = $('#xingming').val();  
                var dianhua = $('#dianhua').val();  
                var file = $('#file').prop('files')[0];  
                var formData = new FormData();  
                formData.append('xingming', xingming); 
                formData.append('dianhua', dianhua);  
                formData.append('file', file);  
                $.ajax({  
                    url: "{:url('index/video_upload')}",  
                    type: 'POST',  
                    processData: false,  
                    contentType: false,  
                    data: formData,  
                    success: function(response) {  
                        // 处理响应数据  
                        alert(response);
                        console.log(response);  
                    },  
                    error: function(xhr, status, error) {  
                        // 处理错误信息 
                        alert(response);
                        console.log(error);  
                    }  
                });  
            });  
        });  
    </script>  


<form class="baoming"   id="submit-form" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="xingming">姓名:</label>
                <input type="text" class="form-control" id="xingming" name="xingming" >
            </div>
            <div class="form-group">
                <label for="dianhua">家长联系电话:</label>
                <input type="text" class="form-control" id="dianhua" name="dianhua" >
            </div>
            <div class="form-group">
                <label for="file">上传舞蹈视频:</label>
                <input type="file"  class="form-control" id="file" name="file" >
            </div>
            <br>
<button type="submit" style="width: 100%">提交</button>
        </form>


PHP post页面代码  这里使用的是   thinkphp5 的 video_upload controller

public function video_upload()
{
if ($this->request->isPost()) {  
            $formData = $this->request->file('file'); // 获取文件数据  
            $xingming = $this->request->param('xingming'); // 获取姓名文本
             $dianhua = $this->request->param('dianhua'); // 获取电话文本  

            if (!$xingming) {
                return "请填写姓名";
            }
            if (!$dianhua) {
                return "请填写电话";
            }
            // 处理文件数据  
            if ($formData) {  
                $info = $formData->validate(['ext' => 'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads');  
                if ($info) {  
                    // 文件上传成功  
                    return "文件上传成功";
                    // ...  
                } else {  
                    // 文件上传失败  
                    return "文件上传失败";
                }  
            } else {  
                // 文件为空或不存在  
                return "文件为空或不存在";
            }  
        } else {  
            // 非POST请求,返回错误信息或其他处理  
            return "非POST请求,返回错误信息或其他处理"; 
        }  
}



技术QQ交流群:157711366

技术微信:liehuweb

写评论