Laravel:点击html按钮时显示相同URL的列表
Laravel: Displaying the list with same URL when clicking the html button
我遇到了一个问题,请看下面的截图。
Screenshot
在截图中,可以看到它的图片上传页面。默认情况下,显示列表的 添加图像 按钮和 table 应该显示。我想要实现的概念是当我单击 添加图像 按钮时,table 列表应该被隐藏并且必须显示图像上传部分。这一切都应该发生在同一个 URL.
代码如下:
路线:
Route::post('/imageupload', 'Admin\ImageController@imageUploadPost')->name('image.upload.post');
Blade 文件:
<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 的新手,所以我看不到解决方案。
如有任何帮助,我们将不胜感激。
这更多是关于 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>
首先定义文件输入的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>
试试这个
<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隐藏节目
我遇到了一个问题,请看下面的截图。
Screenshot
在截图中,可以看到它的图片上传页面。默认情况下,显示列表的 添加图像 按钮和 table 应该显示。我想要实现的概念是当我单击 添加图像 按钮时,table 列表应该被隐藏并且必须显示图像上传部分。这一切都应该发生在同一个 URL.
代码如下:
路线:
Route::post('/imageupload', 'Admin\ImageController@imageUploadPost')->name('image.upload.post');
Blade 文件:
<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 的新手,所以我看不到解决方案。
如有任何帮助,我们将不胜感激。
这更多是关于 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>
首先定义文件输入的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>
试试这个
<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隐藏节目