如何使用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上傳文件圖像？

回答

相關問題