在laravel 5.6中使用ajax序列化Form动态图像字段

问题描述 投票:0回答:1

嗨我想在laravel中使用ajax序列化表单,但我得到错误我不知道为什么要努力搜索互联网但不能理解什么是错误,什么是真正的问题。

这是我的看法

<html lang="en">
<head>
    <meta name="_token" content="{{ app('Illuminate\Encryption\Encrypter')->encrypt(csrf_token()) }}" />
    <title>Laravel Multiple File Upload Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <h3 class="jumbotron">Laravel Multiple File Upload</h3>
    <form method="post"  id="d-form" enctype="multipart/form-data">
        {{csrf_field()}}

        <div class="input-group control-group increment" >
            <input type="file" name="filename[]" class="form-control">
            <input type="text" name="descri[]" class="form-control">
            <div class="input-group-btn">
                <button class="btn btn-success" type="button"><i class="glyphicon glyphicon-plus"></i>Add</button>
            </div>
        </div>
        <div class="clone hide">
            <div class="control-group input-group" style="margin-top:10px">
                <input type="file" name="filename[]" class="form-control">
                <input type="text" name="descri[]" class="form-control">
                <div class="input-group-btn">
                    <button class="btn btn-danger" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary" style="margin-top:10px">Submit</button>

    </form>
</div>


<script type="text/javascript">
    $(function() {
        $.ajaxSetup({
            headers: {
                'X-XSRF-Token': $('meta[name="_token"]').attr('content')
            }
        });
    });

    $(document).ready(function() {

        $(".btn-success").click(function(){
            var html = $(".clone").html();
            $(".increment").after(html);
        });

        $("body").on("click",".btn-danger",function(){
            $(this).parents(".control-group").remove();
        });
        $("#submit").submit(function(){
            var formdata = $("#d-form").serialize();
            $.ajax({
                type: 'POST',
                url: '/form',
                data: formdata,
                success: function (data) {
                    alert(data);
                },
            });
            stay.preventDefault();
        });

    });



</script>
</body>
</html>

这是我的控制器,我正在获取图像并使用json保存它。

<?php

namespace App\Http\Controllers;
use App\Form;
use Illuminate\Http\Request;

class FormController extends Controller
{
    public function create(Request $request)
    {
        $this->validate($request, [
            'filename' => 'required',
            'filename.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'
        ]);
        return view('create');
    }
    public function store(Request $request)

    {

        $this->validate($request, [

            'filename' => 'required',
            'filename.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'

        ]);

        if($request->hasfile('filename'))
        {

            foreach($request->file('filename') as $image)
            {
                $name=$image->getClientOriginalName();
                $image->move(public_path().'/images/', $name);
                $data[] = $name;
            }
        }

        $form= new Form();
        $form->filename=json_encode($data);


        $form->save();

        return  "Your images has been successfully";
    }
}

最后这是我的路线。

Route::get('form','FormController@create');
Route::post('form','FormController@store');
php html ajax laravel-5 serialization
1个回答
0
投票

为POST路由添加命名别名,如下所示:

Route::post('form','FormController@store')->name('form.store');

然后更新你的ajax以发送到这样的路线:

url: '{{ route('form.store') }}',

尝试一下,让我知道它是否适合你。

© www.soinside.com 2019 - 2024. All rights reserved.