如何使用ajax上传文件图片？

I am usin Laravel Framework.

我在Laravel Framework中使用。

I have to use Ajax to upload file image but it response Call to a member function getClientOriginalExtension() on null.

我必须使用Ajax上传文件映像，但它响应在null上调用成员函数getClientOriginalExtension（）。

Form

形成

<form action="{{ route('agent.hotel.image.gallery') }}" enctype="multipart/form-data" method="post" id="form_upload">
    {{ csrf_field() }}
    <input type="file" name="image_gallery" id="image"> 
</form>

Script

脚本

$("#image").on('change', function () {
var image = $(this).val();
  $.ajax({
   method: 'POST',
   url: '{{ route('agent.hotel.image.gallery') }}',
   data: { image_gallery: image, '_token': '{{ csrf_token() }}' },
   success: function (data) {
   console.log(data);
   }
  });
});

Controller

调节器

// Image Gallery

$image = $request->file('image_gallery');
$filename = md5(time()) . '.' . $image->getClientOriginalExtension();
$save = public_path('/hotel_picture/' . $filename);

//Move file upload to public folder
Image::make($image)->save($save);

Anyone can help ? or Have other method to do this ?

有人可以帮忙吗？或者有其他方法可以做到这一点？

3 个解决方案

#1

To POST File object you can use FormData() with key, value pairs matching key that server is expecting. Set processData and contentType of $.ajax() settings to false

对于POST File对象，您可以使用FormData（），其中键值对匹配服务器所期望的键。将$ .ajax（）设置的processData和contentType设置为false

$("#image").on('change', function () {
  var image = this.files[0];
  var fd = new FormData();
  fd.append("image_gallery", image);
  fd.append("_token", "{{ csrf_token() }}");
  $.ajax({
   method: 'POST',
   url: "{{ route('agent.hotel.image.gallery') }}",
   data: fd,
   processData: false,
   contentType: false,
   success: function (data) {
     console.log(data);
   }
  });
});

#2

You can use jquery to directly submit a form like so :

您可以使用jquery直接提交表单，如下所示：

 $("#image").on('change', function () {
      $(this).parents("form").submit():
    });

#3

You can try this code:

你可以试试这段代码：

$("#image").on('change', function () {
    $("#form_upload").submit();
});

$("#form_upload").on('submit', function(e){
    e.preventDefault();
    var formData = new FormData($(this)[0]);
    formData.append('image_gallery', $('#image')[0].files[0]);
    formData.append("_token", "{{ csrf_token() }}");
    $.ajax({
        url: '{{ route('agent.hotel.image.gallery') }}',
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        processData: false
    });
    return false;
});

#1