загрузить изображение с Ajax в Laravel.

Question

Мне нужно вставить данные с помощью ajax в базу данных, теперь они вставляют данные в базу данных, но не загружают изображение.

Код ajax

 $(document).on("click","#save", function(){
        jQuery.ajax({
            method :'post',
            url:''+APP_URL+'/products/add_product',
            data:$("#product_form").serialize(),
            success: function(response){ 
             $("#product_list").load("<?php echo url('products/tblproducts');?>").fadeIn("slow")

                }
            });    
  });

«product_form» - это идентификатор формы.

Маршрут

         Route::post('products/add_product','admin\ProductsController@add_new_product');

Функция контроллера

public function add_new_product(Request $request){
  try{ 
        DB::beginTransaction(); 

         $product_image = NULL;
        if ($request->hasFile('product_photo')){ 
            $ext = $request->product_image->getClientOriginalExtension();
            $product_image = uniqid().".".$ext; 
            $file = $request->file('product_image');
            $destinationPath = public_path("products");
            $file->move($destinationPath, $product_image); 
        }
         $bdata['product_photo']=$product_image;
        $bdata['product_name']= $request->item_name;
        $bdata['product_barcode']= $request->barcode;   
        DB::table('tbl_products')->insert($bdata);
        DB::commit();
        $this->CreateMessages('add');
    }catch(\Exception $v){
         DB::rollback();
        $this->CreateMessages('not_added');
        throw $v;
    }

}

Answer 1

Вы можете загрузить изображение и сериализовать данные формы следующим образом:

<script>
      var formData = new FormData($("#FormId")[0]);
    $.ajax({
        url:''+APP_URL+'/products/add_product',
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        dataType: 'application/json',
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        success: function (data, textStatus, jqXHR) {
               // do what you want
        },
        error: function (jqXHR, textStatus, errorThrown) {

        }
    }); 
</script>

Answer 2

Try below code to upload image:

`$(document).on("click","#save", function(){
 var fd = new FormData();
 fd.append('product_photo',$('#id_of_image_uploader').prop('files')[0]);
 fd.append('item_name', $('#id_of_item_name').val());
 fd.append('barcode', $('#id_of_barcode').val());

 jQuery.ajax({
            method :'post',
            url:''+APP_URL+'/products/add_product',
            data: fd,
            cache: false,
            contentType: false,
            processData: false,
            success: function(response){ 
             $("#product_list").load("<?php echo url('products/tblproducts');?>").fadeIn("slow")
                }
            });
});`

Answer 3

Вы должны изменить:

data:$("#product_form").serialize()

Чтобы стать:

data: new FormData("#product_form")

И ваша форма должна иметь атрибут enctype, установленный в multipart/form-data.