Question

我在Laravel Framework中使用。

我必须使用Ajax上传文件图片，但它会响应Call to a member function getClientOriginalExtension() on null。

表格

<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>

脚本

$("#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);
   }
  });
});

控制器

// 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);

任何人都可以提供帮助？或者有其他方法可以做到这一点？

Answer 1

要File FormData()个对象，您可以将processData与匹配服务器所期望的密钥的值对一起使用。将contentType设置的$.ajax()和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); } }); });

public $foo = 1;
function(){
   return $this->foo+1;
}

Answer 2

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

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

Answer 3

您可以尝试以下代码：

$("#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;
});

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

3 个答案: