ajax无刷新提交包含文件的表单

ajax无刷新提交包含文件的表单

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以异步上传一个二进制文件,所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
参见https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
表单

<form id="loginForm">
    name：<input type="text" name="name">
    <br>
    mail：<input type="text" name="mail">
    <br>
    photo：<input type="file" name="photo">
</form>
<button>提交</button>

jquery代码

<script>
    $("button").click(function () {
        var formData=new FormData($("#loginForm")[0]);
        $.ajax({
            url: "{{url('api/ajax')}}",
            type: "POST",
            dataType:"json",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data,TextStatus){
                if(data.result==true){
                    alert("登录成功");
                }else{
                    alert(data.errMsg);
                }
            },
            error: function (data) {
                alert(data);
            }
        });
    });
</script>

后台php代码（laravel框架）

    public function ajax(Request $request)
    {
        if ($request->method() == 'POST') {
            $data = $request->all();
            $file = $request->file('photo');
            if ($file->isValid()) {
                $ext = $file->guessClientExtension();
                $type = $file->getClientMimeType();
                if (in_array($ext, ['jpg', 'png', 'jpeg']) && in_array($type, ['image/jpeg', 'image/png'])) {
                    $filename = uniqid() . '.' . $ext;
                    if ($file->storeAs('', $filename) == false) {
                        return response()->json(['result' => false, 'errMsg' => '上传文件出错']);
                    }
                }
            }
            if ($data['username'] == 'cph' && $data['password'] == '123123') {
                return response()->json(['result' => true]);
            } else {
                return response()->json(['result' => false, 'errMsg' => '用户名或密码错误']);
            }
        } else {
            return view('index/ajax');
        }
    }