2016-12-13 11 views
4

Я пытаюсь написать сценарий, который отправляет данные изображения контроллеру и сохраняет его, я получаю изображение с jQuery, затем создаю данные формы и отправляю его с помощью ajax, но в контроллере мой индекс не определен, Я стараюсь, чтобы сохранить изображение с $_FILES, мой код: мой Ajax скрипт:laravel 5.2 отправить данные формы контроллеру с 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, пожалуйста, помогите мне.

+0

сделать '' var_dump' на $ _FILES' вставить здесь – madalinivascu

+0

в результат равен нулю –

+0

примечание: это не будет работать ниже, чем ie10, как вы запускаете событие ajax? – madalinivascu

ответ

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

Это Java-код, я использую для отправки файла изображения на сервер.

Что касается контроллера, то функция move_uploaded_file, которую вы используете, должна работать нормально, хотя я использую собственную обработку файлов Laravel и библиотеку под названием Intervention.

http://image.intervention.io/

Intervention изображение является большим, вы могли бы сделать много всего с ним, я рекомендую!

Вот как я обрабатывать загрузки изображения:

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

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

Надежда это помогает, держите меня в курсе, что происходит, и я помогу :)

EDIT: Вот полный пример

// 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.append('_token', $('input[name=_token]').val()); 
+0

спасибо за ваш ответ, я следую вашему ответу и делаю все, что вы сказали, но файл $ request-> ('file') по-прежнему возвращает null :(, why? –

+0

Хорошо, пару вопросов - #questionTitleImage - это , правильно? После этого при отправке запроса - вы можете console.log (title_image) и посмотреть, возвращает ли title_image файл - может быть, что javascript не возвращает file case. Если это не так, я напишу весь код. –

+0

#questionTitleImage - это вход файла yes !, а title_imgae перед отправкой: File {name: "Chrysanthemum.jpg ", lastModified: 1247549551674, lastModifiedDate: Вт Июл 14 2009 10:02:31 GMT + 0430 (Иран Daylight Time), webkitRelativePath:" ", размер: 879394 ...} –