laravel 5.2發送表單數據到控制器與ajax

Question

我嘗試編寫腳本，發送圖像數據到控制器並保存它，我用jQuery獲取圖像，然後創建表單數據併發送它與ajax但在控制器我的索引是未定義的，我試圖將圖像保存$_FILES，我的代碼是： 我的AJAX腳本是：

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 
var title_image = $('#questionTitleImage').prop('files')[0]; 
var form_data = new FormData(); 
form_data.append('file', title_image); 
$('#addQuestionLoader').show(); 
$.ajax({ 
    url: '/imageUpload/', 
    type: 'GET', 
    data: form_data, 
    contentType: false, 
    processData: false, 
    success: function (data) { 
     console.log(data); 
    }, 
    complete:function() { 
     $('#addQuestionLoader').hide(); 
    } 
}); 

我的控制器：

public function imageUpload(Request $request) { 
    if (0 < $_FILES['file']['error']) { 
     echo 'Error: ' . $_FILES['file']['error'] . '<br>'; 
    } else { 
     move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']); 
    } 
} 

請幫我完成我的項目，如果你有最好的用ajax保存圖像的方法請幫助我。

Answer 1

我想你並沒有將文件發送到服務器。我可能會錯，但你可以嘗試這樣的事情：

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 
var title_image = $('#questionTitleImage').prop('files')[0]; 

var xhr = new XMLHttpRequest(); 
if (xhr.upload) { 
    formData.append('file', title_image); 
    // you forgot including the token 
    formData.append('_token', CSRF_TOKEN); 
    // change your request to POST, GET is not good for files 
    xhr.open("POST", '/imageUpload', true); 
    xhr.send(formData); 

    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4 && xhr.status == 200) { 
      alert("Uploaded"); 
     } 
    } 
} 

這是我用來發送圖像文件到服務器的JavaScript代碼。

至於控制器，您使用的move_uploaded_file函數應該工作正常，儘管我使用的是Laravel的本機文件處理以及名爲Intervention image的庫。

http://image.intervention.io/

干預形象是偉大的，你可以做一大堆吧，我推薦它！

這是我如何處理圖片上傳：

// get image 
$file = $request->file('file'); 
// save it 
$file->store('img'); 

希望：

use Illuminate\Http\Request; 
use Intervention\Image\ImageManager; 

public function upload(Request $request) 
{ 
    // get image 
    $file = $request->file('file'); 

    // instantiate Intervention Image 
    $imageManager = new ImageManager(); 
    $image = $imageManager->make($file); 

    // save image with a new name 
    $image->save(public_path() . '/img/new-image.jpg', 100); 

    return response()->json([ 
     'success' => true, 
    ]); 
} 

如果你不想使用干預的形象，你可以只使用Laravel的本地文件處理程序傳送文件這有助於，讓我貼出發生了什麼，我會幫助:)

編輯：下面是完整的示例

// javascript 
$('body').on('change', '#questionTitleImage', function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 

    var CSRF_TOKEN = $('input[name=_token]').val(); 
    var files = e.target.files || e.dataTransfer.files; 
    var file = files[0]; 

    var xhr = new XMLHttpRequest(); 
    if (xhr.upload) { 
     var formData = new FormData(); 
     formData.append('file', file); 
     formData.append('_token', CSRF_TOKEN); 
     xhr.open("POST", '/image', true); 
     xhr.send(formData); 

     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4 && xhr.status == 200) { 
       alert('Success'); 
      } 
     } 
    } 
}); 

CSRF令牌字段：

// this goes below your input type file 
{{ csrf_field() }} 

而且事後，其追加到這樣的FORMDATA：

formData.append('_token', $('input[name=_token]').val());