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

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

我面临问题,请参见以下屏幕截图。

Screenshot

在屏幕截图中,您可以看到其图像上传页面。默认情况下,应显示添加图像按钮和显示列表的表格。我要实现的概念是,当我单击添加图像按钮时,表列表应该被隐藏并且必须显示图像上载部分。所有这些都应在同一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的新手,所以我看不到解决方案。

任何帮助将不胜感激。

php laravel routes show-hide
3个回答
0
投票

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


0
投票

首先定义文件输入的ID;


0
投票

尝试一下

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