2015-06-09 2 views
1

Я никогда не сталкивался с этой проблемой до того, как работал над Laravel.Laravel 5 загрузка файла не работает при использовании AJAX

У меня есть форма, которая будет вставлять детали продукта, которые также имеют поле изображения.

Вот как я создаю представление для вставки деталей продукта:

{!! Form::open(['url' => '/admin/products', 'autocomplete' => 'off', 'id' => 'formAddProduct', 'files' => true]) !!} 
    <div class="errors"></div> 

    @include('admin.products.form', ['submitButtonText' => 'Add Product', 'submitButtonId' => 'btnAddProduct']) 
{!! Form::close() !!} 

form.blade.php: метод

<div class="form-group"> 
    {!! Form::label('code', 'Code') !!} 
    {!! Form::text('code', null, ['class' => 'form-control']) !!} 
</div> 

<div class="form-group"> 
    {!! Form::label('name', 'Name:') !!} 
    {!! Form::text('name', null, ['class' => 'form-control']) !!} 
</div> 

<div class="form-group"> 
    {!! Form::label('category_id', 'Category:') !!} 
    {!! Form::select('category_id', $categories, null, ['class' => 'form-control']) !!} 
</div> 

<div class="form-group"> 
    {!! Form::label('short_description', 'Short Description:') !!} 
    {!! Form::text('short_description', null, ['class' => 'form-control']) !!} 
</div> 

<div class="form-group"> 
    {!! Form::label('description', 'Long Description:') !!} 
    {!! Form::text('description', null, ['class' => 'form-control']) !!} 
</div> 

<div class="form-group"> 
    {!! Form::label('price', 'Price:') !!} 
    {!! Form::text('price', null, ['class' => 'form-control']) !!} 
</div> 

<div class="form-group"> 
    {!! Form::label('discount_price', 'Discount Price:') !!} 
    {!! Form::text('discount_price', null, ['class' => 'form-control']) !!} 
</div> 

<div class="form-group"> 
    {!! Form::label('display', 'Display Status:') !!} 
    {!! Form::select('display', ['Enabled' => 'Enabled', 'Disabled' => 'Disabled'], null, ['class' => 'form-control']) !!} 
</div> 

<div class="form-group"> 
    {!! Form::label('image_file', 'Image:') !!} 
    {!! Form::file('image_file', ['id' => 'image_file', 'class' => 'form-control input-sm']) !!} 
</div> 

<div class="form-group"> 
    {!! Form::submit($submitButtonText, ['class' => 'btn btn-primary btn-block', 'id' => $submitButtonId]) !!} 
</div> 

Контроллер:

public function store(Request $request) { 
    $this->validate($request, [ 
     'code'    => 'required|alpha_dash|unique:products', 
     'name'    => 'required', 
     'category_id'  => 'required|integer', 
     'short_description' => 'string', 
     'description'  => 'required', 
     'price'    => 'required|regex:/^\d*(\.\d{2})?$/', 
     'discount_price' => 'regex:/^\d*(\.\d{2})?$/', 
     'display'   => 'required|in:Enabled,Disabled', 
     'image_file'  => 'mimes:jpg' 
    ]); 

    if ($request->ajax()) { 
     Product::create($request->all()); 

     if ($request->file('image_file')) { 

      $filename = Safeurl::make($request->get('code')); 
      $image = Image::make($request->file('image_file')); 
      $path = public_path('images/uploads/products/'); 

      $image->resize(450, 450)->save($path.$filename.'.jpg', 100); 
     } else { 
      return response(['msg' => 'No File']); 
     } 
     return response(['status' => 'success', 'msg' => 'The product has been added successfully.']); 
    } 
     return response(['status' => 'failed', 'msg' => 'The product could not be added successfully.']); 
    } 

И ajax:

$('#btnAddProduct').on('click', function() { 
    var inputData = $('#formAddProduct').serialize(); 

    $.ajax({ 
     url: '{{ url('/admin/products') }}', 
     type: 'POST', 
     data: inputData, 
     success: function(message) { 
      alert(message.msg); 
      if (message.status === 'success') { 
       toastr.success('Product added successfully.'); 
       toastr.options.closeButton = true; 
       toastr.options.showMethod = "slideDown"; 
       toastr.options.hideMethod = "slideUp"; 

       $('input').val(''); 
       $('select').val(''); 
      } 
     }, 
     error: function(data) { 
      if (data.status === 422) { 
       var errors = data.responseJSON; 
       var errorsHtml = '<div class="alert alert-danger"><ul>'; 
       errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'; 
       $.each(errors, function(key, value) { 
        errorsHtml += '<li>' + value[0] + '</li>'; //showing only the first error. 
       }); 
       errorsHtml += '</ul></div>'; 

       $('.errors').html(errorsHtml); 
      } 
     } 
    }); 

    return false; 
}); 

Ошибки я получаю No file

Когда я var_dump($request->file('image_file')); я null в Табе реагирования хрома

Когда я var_dump(Input::file('image_file')); я null в Табе отклика хрома

Где я совершил ошибку? Пожалуйста, помогите мне. Благодарю.

P.S.: Я использовал Intervention в качестве функции загрузки изображений.

+0

Что произойдет, если вы '' var_dump' от входа :: все() '? –

+0

Все, кроме входа 'file' –

+0

В вашем ajax вы должны добавить' data: formData, ' –

ответ

0

Вы должны добавить data: formData, и async: false, в вашем АЯКС вызова

Так что ваш Аякса будет

$("form[name='yourformname']").submit(function(e) {//If you use form submit then have your form name here 
//$('#btnAddProduct').on('click', function() { 
var inputData = new FormData($(this)[0]); 
//var inputData = $('#formAddProduct').serialize(); not matter :p 
    e.preventDefault(); 
$.ajax({ 
    url: '{{ url('/admin/products') }}', 
    type: 'POST', 
    data: inputData, 
    async: false, 
    success: function(message) { 
     alert(message.msg); 
     if (message.status === 'success') { 
      toastr.success('Product added successfully.'); 
      toastr.options.closeButton = true; 
      toastr.options.showMethod = "slideDown"; 
      toastr.options.hideMethod = "slideUp"; 

      $('input').val(''); 
      $('select').val(''); 
     } 
    }, 
    error: function(data) { 
     if (data.status === 422) { 
      var errors = data.responseJSON; 
      var errorsHtml = '<div class="alert alert-danger"><ul>'; 
      errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'; 
      $.each(errors, function(key, value) { 
       errorsHtml += '<li>' + value[0] + '</li>'; //showing only the first error. 
      }); 
      errorsHtml += '</ul></div>'; 

      $('.errors').html(errorsHtml); 
     } 
    } 
}); 

return false; 
}); 

Update:

  1. Включите async:true в вашем АЯКС вызова

  2. Имейте это в Laravel Validator Правило image_file' => 'mimes:jpeg,jpg,JPG'

+0

Ничего не происходит, страница перезагружается с введенными данными, кроме для поля изображения. При проверке вкладки «Сеть» я получаю ответ 302. –

+0

Вы указали правильное имя формы здесь '$ (" form [name = 'yourformname'] "). Submit (function (e)' в первой строке? –

+0

Я обновил его внутри 'e.preventDefault();' в моем скрипте. Добавьте его слишком –

0

Метод serialize() не передает информацию о файле для обработчика удаленных обработчиков. Альтернативой является использование FormData. Смотрите эту ссылку для примера: http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/

ПРИМЕЧАНИЕ: Его важно установить ProcessData и CONTENTTYPE ложь в запросе Ajax JQuery, в противном случае это приведет к ошибке во время JQuery попытаться обработать его.

+0

Связанный: http://stackoverflow.com/a/8244082/646644 –

Смежные вопросы