php - Laravel:单击html按钮时显示具有相同URL的列表
问题描述
我遇到了一个问题,请看下面的截图。
在截图中,你可以看到它的图片上传页面。默认情况下,应显示“添加图像”按钮和显示列表的表格。我想要实现的概念是,当我单击“添加图像”按钮时,表格列表应该被隐藏并且必须显示图像上传部分。这一切都应该发生在同一个 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 的新手,所以我看不到解决方案。
任何帮助将不胜感激。
解决方案
试试这个
<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 hidden show
推荐阅读
- amazon-web-services - Amazon Cognito 需要一些解释
- javascript - 如何在本机反应中旋转文本?
- r - 将kml文件导入R
- java - 为什么我不能访问在构造函数 (Java) 中创建的类的实例
- vb6 - findstr() 作为子进程调用时出现运行时错误 23?
- c++ - 如何访问父对象的句柄?
- php - Laravel auth()->user->posts()->create($data); > 未定义属性:Illuminate\Auth\AuthManager::$user
- javascript - li 元素标签中的数字不适用于 vue.js
- wordpress - Git:远程:致命:索引文件损坏,“索引使用 yz 扩展名”?
- regex - Bash脚本到7za目录中的所有文件然后重命名文件