Question

我试图通过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上传图像或文件。谢谢你的进步。

Answer 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();
    });
});

Laravel 5 ajax文件上传

1 个答案: