Laravel 5 ajax 文件上传答案

【问题标题】：Laravel 5 ajax file uploadLaravel 5 ajax 文件上传
【发布时间】：2016-07-21 18:30:36
【问题描述】：

我正在尝试通过 ajax 在 lravel 5 中上传图片听我的 HTML 表单

<form role="form" method="POST" action="/save-doctor" id="add_doctor" enctype="multipart/form-data">
{!! csrf_field() !!}
<input name="photo" type="file" id="imgInp" accept="image/png, image/jpeg,image/jpg" onchange="readURL(this);">
<input type="email" class="form-control" name="email" id="email"">
</form>

我通过这个脚本发送一个 ajax 请求

$(document).ready(function(){
            $("#add_doctor").submit(function(e){
                e.preventDefault();

                $.ajax({
                    url : '/save-doctor',
                    type : 'POST',
                    data : {
                        'photo' : $('input:file[name=photo]').val(),
                        'email' : $('input[name=email]').val(),
                        '_token': $('input[name=_token]').val()
                    },
                    success : function(data){
                        console.log("Sucess");
                        console.log(data);
                    },
                    error : function(data){
                        console.log("error");
                        console.log(data);
                    }
                });
            });
});

Ajax 总是给我一个完整的文件路径而不是一个文件。如何在 laravel 中通过 ajax 上传图像或文件。谢谢你提前。

【问题讨论】：

标签： javascript php jquery ajax laravel-5.2

【解决方案1】：

您可以创建一个新的 Form 对象并将其发送到您的控制器

$(document).ready(function (e) {
    $('#add_doctor').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $("#imgInp").on("change", function() {
        $("#add_doctor").submit();
    });
});

【讨论】：