Laravel：单击html按钮时显示具有相同URL的列表

Question

我遇到了一个问题，请看下面的截图。

Screenshot

在截图中，你可以看到它的图片上传页面。默认情况下，应该显示添加图片按钮和显示列表的表格。我要实现的概念是，当我单击 Add Image 按钮时，表格列表应该被隐藏并且必须显示图像上传部分。这一切都应该发生在同一个 URL 中。

下面是代码：

路线：

Route::post('/imageupload', 'Admin\ImageController@imageUploadPost')->name('image.upload.post');

刀片文件：

<div class="panel panel-container">
    <button type="button" class="btn btn-primary">Add Image</button>
</div>
<div class="panel panel-container">
    <table class="table table-striped" id="slideshow">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="panel panel-container hide-img-upload">
    <form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">

            @csrf


        <div class="row">
            <div class="col-md-6">
                <input type="file" name="image" class="form-control">
                </div>
                <div class="col-md-6">
                    <button type="submit" class="btn btn-success">Upload</button>
                </div>
            </div>
        </form>
    </div>
</div>

控制器：

public function imageUploadPost()

    {
  return back()

            ->with('success','You have successfully upload image.')

            ->with('image',$imageName);

    } 

因为我是 Laravel 的新手，所以我看不到解决方案。

任何帮助将不胜感激。

Answer 1

试试这个

<div class="panel panel-container">
    <button type="button" class="btn btn-primary"data-toggle="modal"data-target="#myModal">Add Image</button>
</div>
<div class="panel panel-container">
    <table class="table table-striped" id="slideshow">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
 <div class="modal" id="myModal" role="dialog"
         aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Upload Image </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>

                <div class="panel panel-container hide-img-upload">
                    <form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">

                        @csrf


                        <div class="row">
                            <div class="col-md-6">
                                <input type="file" name="image" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-success">Upload</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>


            </form>
        </div>

    </div>

或为此使用javascript隐藏显示

Answer 2

这更多是关于 html 和 javascript 人员。 您可以将其用作提示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button onclick="alter()">Alter</button>
    <div id="first">First</div>
    <div id="sec">Second</div>

    <script>
document.getElementById('sec').style.visibility = 'hidden';
function alter(){
  if(document.getElementById('sec').style.visibility == 'hidden'){
    document.getElementById('sec').style.visibility = 'visible';
    document.getElementById('first').style.visibility = 'hidden';
  }else{

    document.getElementById('sec').style.visibility = 'hidden';
    document.getElementById('first').style.visibility = 'visible';
  }
}
    </script>
  </body>
</html>

Answer 3

首先定义文件输入的id；

<input type="file" name="image" id="file_input" class="form-control">

为列表范围定义id之后；

<div class="panel panel-container" id="list_scope">

最后添加 JavaScript 代码；

<script>
    document.getElementById('file_input').onclick = function() {
        document.getElementById('list_scope').style.display = "none";
    };
</script>