Question

我尝试使用laravel制作带有多个Image Upload的CRUD。我已经完成了大部分工作，但是当我尝试将页面刷新提交回创建页面时，我想要输入的值就消失了。

这是我在ArticleController中的商店功能

public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            'filename' => 'required',
            'filename.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:5120',
            'content' => 'required'
        ]);

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

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

    $article= new Article();
    $article->filename=json_encode($data);


    $article->save();
    $article = Article::create($request->all());

    return redirect()->route('article.index')->with('message', 'Article Saved!');
}

这是我的create.blade.php

@extends('layouts.app')

@section('content')
<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">
<script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
<script>
  tinymce.init({
    imageupload_url: "../upload/",
    selector: "textarea",
    theme: "modern",
    language: "en",
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor jbimages"
    ],
    content_css: "css/content.css",
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons jbimages", 
    relative_urls: false
});
</script>
<script type="text/javascript">
    $(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();
    });
    });
    </script>
<main class="app-content">
  <div class="app-title">
    <div>
      <h1><i class="fa fa-dashboard"></i> Artikel</h1>
      <p>Berita Terbaru</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
      <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
      <li class="breadcrumb-item"><a href="/home">Home</a></li>
    </ul>
  </div>
  <h4>Artikel Baru</h4>
  <form action="{{ route('article.store') }}" method="post">
    {{csrf_field()}}
    <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
      <label for="title" class="control-label">Title</label>
      <input type="text" class="form-control" name="title" placeholder="Title">
        @if ($errors->has('title'))
          <span class="help-block">{{ $errors->first('title') }}</span>
        @endif
    </div>
    <form method="post" action="{{url('form')}}" enctype="multipart/form-data">
    {{csrf_field()}}

      <div class="input-group control-group increment" >
        <input type="file" name="filename[]" 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">
            <div class="input-group-btn"> 
              <button class="btn btn-danger" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
            </div>
          </div>
        </div>



    <div class="form-group {{ $errors->has('content') ? 'has-error' : '' }}">
      <label for="content" class="control-label">Content</label>
      <textarea name="content" cols="30" rows="5" class="form-control"></textarea>
        @if ($errors->has('content'))
          <span class="help-block">{{ $errors->first('content') }}</span>
        @endif
    </div>
      <button type="submit" class="btn btn-info">Simpan</button>
      <a href="{{ route('article.index') }}" class="btn btn-default">Kembali</a>
      </form>
  </form>
</main>
@endsection

感谢您的关注

Answer 1

我假设你想在提交后保留输入值吗？

在这种情况下，您可以执行ajax调用而不是提交它。

OR

return redirect()->route('article.index')->with('message', 'Article Saved!');

您可以更改此选项以返回，而不是重定向。

Answer 2

您可以使用AJAX提交请求（确保定位正确的表单和按钮）

$('button').on('click', function(e) {
  e.preventDefault();
  let data = $('form').serialize();
  let url = {{url('form')}};
  $.ajax({
    type: "POST",
    url: url,
    data: data,
    success: function(data) {
      // response from server can be used to refresh form inputs
    }
  });
});

在您的控制器中：

public function store(Request $request)
{
    ... 
    ...

    if ($request->ajax())
        return response()->json('Article Saved!');

    return redirect()->route('article.index')->with('message', 'Article Saved!');
}

提交后输入文字消失了

2 个答案: