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

我使用的是Laravel框架

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

表格

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

---

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

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

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

---

若要发布

文件

对象，可以将

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

您可以尝试以下代码：

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

---

.val（）

返回文件的假路径，而不是

文件

对象，您可以使用

元素的

.files

属性获取

文件

对象。您的服务器似乎需要

“image\u gallery”

，

文件

对象的键、值对。您可能必须使用

FormData（）

通过ajaxform传递图像，然后将其提交重定向到其他路径。我想在不重新加载页面的情况下上传图像。@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;
});