这个论坛的新手。因此,对不起,如果我缺少任何有关需要帮助的信息。让我的网页作为带有角的弹簧靴运行。需要帮助。需要在一行中具有“浏览”按钮(用于选择/选择要上传的文件)和“提交”按钮(用于上传文件),但是两者应该分开。提交按钮应位于同一行/行的最右端,与附件图像中的“浏览”按钮旁边不同。
这是我正在使用的代码:
<div class="row">
<div class="form-group">
<input type="file" name="img[]" class="file" style="display: none">
<div class="input-group col-xs-6 text-left">
<span class="input-group-addon"><i
class="glyphicon glyphicon-picture"></i></span> <input type="text"
class="form-control input-lg" disabled
placeholder="Upload xxxx xlsx format file"> <span
class="input-group-btn">
<button class="browse btn btn-primary input-lg" type="button">
<i class="glyphicon glyphicon-search"></i> Browse
</button>
</span>
<input type="submit" class="btn btn-info btn-lg pull-right"
align="right" value="Submit" />
</div>
</div>
<div class="form-group">
<input type="file" name="img[]" class="file" style="display: none">
<div class="input-group col-xs-6">
<span class="input-group-addon"><i
class="glyphicon glyphicon-picture"></i></span> <input type="text"
class="form-control input-lg" disabled
placeholder="Upload xxxx xlsx format file"> <span
class="input-group-btn">
<button class="browse btn btn-primary input-lg" type="button">
<i class="glyphicon glyphicon-search"></i> Browse
</button>
</span>
<input type="submit" class="btn btn-info btn-lg pull-right"
align="right" value="Submit" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
![enter image description here][1]
[1]: https://i.stack.imgur.com/t7ZfH.jpg
and here is the complete HTML tag from my JSP file
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ page isELIgnored="false"%>
<title>xxxxx </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4
/angular.min.js"></script>
<script src="././javascript/dm.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7
/css/bootstrap.min.css">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7`
/js/bootstrap.min.js"></script>`
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker
/1.5.0/css/bootstrap-datepicker.css"
rel="stylesheet">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker
/1.5.0/js/bootstrap-datepicker.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4
/js/i18n/defaults-zh_TW.min.js"></script>
<!-- <script src="././javascript/week.js"></script> -->
</head>
<script type="text/css">
.file {
visibility: hidden;
position: absolute;
}
</script>
<script type="text/javascript">
$(document).on('click', '.browse', function() {
alert("work in progress No file will be saved");
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
});
$(document).on(
'change',
'.file',
function() {
alert("work in progress No file will be saved");
$(this).parent().find('.form-control').val(
$(this).val().replace(/C:\\fakepath\\/i, ''));
});
var dmId = "${dmId}";
function dateChange(newdate) {
var scope =
angular.element(document.getElementById('dashboard'))
.scope();
scope.dateChange(newdate);
}
// When the document is ready
$(document).ready(function() {
$('#dpeDate, #depCal').datepicker({
minViewMode : 1,
autoclose : true,
format : 'MM, yyyy'
}).datepicker('setDate', 'today');
var date = "";
});
$(".dropdown-menu li a").click(
function() {
$(this).parents(".dropdown").find('.btn').html(
$(this).text() + ' <span class="caret">
</span>');
$(this).parents(".dropdown").find('.btn').val(
$(this).data('value'));
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" id="dashboard">
<!-- {{dmId}}
-->
<c:set var="weekList">document.get("dpe").value</c:set>
<div class="container">
<p>
<input type="button" class="btn btn-success btn-lg
pull-right"
onclick="location.href='/AdMetrics/welcome';"
value="Home" />
</p>
<div class="page-header">
<h1>
Welcome to xxxx | <b>xxxx</b>
</h1>
<div class="row">
<div class="col-lg-5"></div>
<div class="col-lg-3">
<div class="input-group">
<div class="form-group">
<div id="wait"
style="display: none; width: 69px;
height: 89px; position: absolute; top: 50%; left: 30%; padding: 2px;">
<img src='demo_wait.gif'
width="200" height="200" /> <br> Loading..
</div>
<div class='input-group date'
id="dpeDate">
<input class="form-control"
type="text" id="selDate"
onchange="dateChange(this.value);"
placeholder="click to Select Month & Year"> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<input type="file" name="img[]" class="file" style="display: none">
<div class="input-group col-xs-6 text-left">
<span class="input-group-addon"><i
class="glyphicon glyphicon-picture"></i></span> <input type="text"
class="form-control input-lg" disabled
placeholder="Upload xxxx xlsx format file"> <span
class="input-group-btn">
<button class="browse btn btn-primary input-lg" type="button">
<i class="glyphicon glyphicon-search"></i> Browse
</button> </span>
<input type="submit" class="btn btn-info btn-lg pull-right"
align="right" value="Submit" />
</div>
</div>
<div class="form-group">
<input type="file" name="img[]" class="file" style="display: none">
<div class="input-group col-xs-6">
<span class="input-group-addon"><i
class="glyphicon glyphicon-picture"></i></span> <input type="text"
class="form-control input-lg" disabled
placeholder="Upload xxxx xlsx format file"> <span
class="input-group-btn">
<button class="browse btn btn-primary input-lg" type="button">
<i class="glyphicon glyphicon-search"></i> Browse
</button>
</span>
<input type="submit" class="btn btn-info btn-lg pull-right"
align="right" value="Submit" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>