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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在laravel 5.6中使用ajax序列化Form动态图像字段相关的知识,希望对你有一定的参考价值。

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

这是我的看法

<html lang="en">
<head>
    <meta name="_token" content="{{ app('IlluminateEncryptionEncrypter')->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 AppHttpControllers;
use AppForm;
use IlluminateHttpRequest;

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');
答案

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

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

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

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

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

以上是关于在laravel 5.6中使用ajax序列化Form动态图像字段的主要内容,如果未能解决你的问题,请参考以下文章

当通过Ajax进行POST时,Laravel 5.6 CSRF令牌失败

Laravel 5.6 上的 Ajax 身份验证重定向

在Laravel 5.6中重置密码链接

使用 Laravel 4+ 从 jQuery/ajax 保存序列化的可排序数据

Laravel5.5升级碰到5.6的问题

Laravel 4:Input::all() 使用 $.ajax POST 不返回任何数据