<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>