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

我必须使用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);

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

来源

2017-07-31 Chando

'.VAL（）'返回文件的假路径，而不是'File'对象，可以使用''元素的'.files'属性来获得'File'对象。您的服务器似乎期望''image_gallery''，'File'对象的key，value对' – guest271314

您可能必须使用FormData（）传递图像，通过ajax – Rasclatt

为POSTFile对象，你可以使用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); 
    } 
    }); 
});

来源

2017-07-31 04:55:18 guest271314

谢谢。这行得通。 – Chando

@Chando，如果该代码有效，那么你应该接受答案。 –

您可以使用jQuery直接提交表单，像这样：

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

来源

2017-07-31 04:50:43

表单将其提交重定向到其他路由。我想上传没有重新加载页面的图像。 – Chando

你可以试试这个代码：

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

来源

2017-07-31 05:02:41

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

回答

相关问题