<html>
<head>
<title>文件生成</title>
<style>
.header {
width: 100%;
height: 50px;
background: rgb(44, 58, 74);
font-size: 25px;
font-weight: 500px;
line-height: 50px;
color: #fff;
padding-left: 15px;
margin-bottom: 25px;
}
.message {
color: red;
padding: 20px 0px;
}
.form {
width: 500px;
margin: 0 auto;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .2);
border-color: rgba(0, 0, 0, .2);
padding: 0px 20px;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 20px;
}
.title {
font-size: 14px;
color: #606266;
line-height: 20px;
box-sizing: border-box;
margin-right: 20px;
}
.file-row {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 20px;
width: 100%;
}
.file-name {
font-size: 14px;
color: #606266;
line-height: 20px;
margin-left: 10px;
}
.file {
position: relative;
display: inline-block;
background: #409eff;
border: 1px solid #409eff;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #fff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
font-size: 14px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #409eff;
border-color: #409eff;
color: #fff;
text-decoration: none;
}
.number input {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: 0;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
.submitBtn {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
color: #fff;
background-color: #409eff;
border-color: #409eff;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 20px 0px;
transition: .1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(document).ready(function () {
$(".file").on("change", "input[type='file']", function () {
var filePath = $(this).val();
var arr = filePath.split('\\');
var fileName = arr[arr.length - 1];
document.getElementById('showFileName').innerHTML = fileName;
})
});
</script>
</head>
<!--<body>-->
<!-- {% if message %}-->
<!-- <p style="color:red">{{ message }}</p>-->
<!-- {% endif %}-->
<!-- <form action="/generation" method="post" enctype="multipart/form-data">-->
<!-- <legend>Please sign in:</legend>-->
<!-- <p><input name="dxf_file" placeholder="dxf_file" type="file"></p>-->
<!-- <p><input name="area" placeholder="面积" type="number"></p>-->
<!-- <p><button type="submit">提交户型轮廓文件</button></p>-->
<!-- </form>-->
<!--</body>-->
<body style="margin: 0;padding: 0; background: #F2F6FC;">
<div class="header">mvp</div>
<form action="/excel_upload" method="post" enctype="multipart/form-data">
<div class="form">
<div class="message">
{% if message %}
{{ message }}
{% endif %}
</div>
<div class="file-row">
<div class="title">文件:</div>
<a href="javascript:;" class="file">选择文件
<input name="mvp_excel" placeholder="mvp_excel" type="file">
</a>
<div class="file-name" id="showFileName"></div>
</div>
<div class="file-row">
<div class="title">邮箱:</div>
<div class="number">
<input name="email" placeholder="请输入邮箱" type="number">
</div>
</div>
<button type="submit" class="submitBtn">确认更新</button>
</div>
</form>
</body>
</html>