IE下附件上傳元件樣式
阿新 • • 發佈：2019-01-17
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>測試管理</title>
<meta name="decorator" content="default" />
<style type="text/css">
.file-btn {
position: relative;
display: inline-block;
overflow: hidden;
}
.file-btn input {
position: absolute;
right: 0px;
top: 0px;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
float: right;
}
.div-in-center{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<form:form id="inputForm" modelAttribute="test" action="${ctx}/test/test/save" method="post" enctype="multipart/form-data">
<div class="div-in-center">
<div style="float: left;">
<input type="text" id="fielName" readonly="readonly"/>
</div>
<div class="btn btn-inverse file-btn"> <div>上傳</div>
<input id="file" type="file" name="file">
</div >
</div>
<div class="form-actions">
<input id="btnSubmit" class="btn btn-primary" type="button" value="保 存" />
<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)" />
</div>
</form:form>
<script type="text/javascript">
$("#file").change(function(){
$("#fielName").attr("value",this.value);
});
$("#btnSubmit").click(function(){
alert("check form");
});
</script>
</body>
</html>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>測試管理</title>
<meta name="decorator" content="default" />
<style type="text/css">
.file-btn {
position: relative;
display: inline-block;
overflow: hidden;
}
.file-btn input {
position: absolute;
right: 0px;
top: 0px;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
float: right;
}
.div-in-center{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<form:form id="inputForm" modelAttribute="test" action="${ctx}/test/test/save" method="post" enctype="multipart/form-data">
<div class="div-in-center">
<div style="float: left;">
<input type="text" id="fielName" readonly="readonly"/>
</div>
<div class="btn btn-inverse file-btn"> <div>上傳</div>
<input id="file" type="file" name="file">
</div >
</div>
<div class="form-actions">
<input id="btnSubmit" class="btn btn-primary" type="button" value="保 存" />
<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)" />
</div>
</form:form>
<script type="text/javascript">
$("#file").change(function(){
$("#fielName").attr("value",this.value);
});
$("#btnSubmit").click(function(){
alert("check form");
});
</script>
</body>
</html>