form.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <html>
  2. <head>
  3. <title>文件生成</title>
  4. <style>
  5. .header {
  6. width: 100%;
  7. height: 50px;
  8. background: rgb(44, 58, 74);
  9. font-size: 25px;
  10. font-weight: 500px;
  11. line-height: 50px;
  12. color: #fff;
  13. padding-left: 15px;
  14. margin-bottom: 25px;
  15. }
  16. .message {
  17. color: red;
  18. padding: 20px 0px;
  19. }
  20. .form {
  21. width: 500px;
  22. margin: 0 auto;
  23. background: #fff;
  24. box-shadow: 4px 4px 40px rgba(0, 0, 0, .2);
  25. border-color: rgba(0, 0, 0, .2);
  26. padding: 0px 20px;
  27. display: flex;
  28. flex-direction: column;
  29. align-items: center;
  30. padding-bottom: 20px;
  31. }
  32. .title {
  33. font-size: 14px;
  34. color: #606266;
  35. line-height: 20px;
  36. box-sizing: border-box;
  37. margin-right: 20px;
  38. }
  39. .file-row {
  40. display: flex;
  41. flex-direction: row;
  42. align-items: center;
  43. padding-bottom: 20px;
  44. width: 100%;
  45. }
  46. .file-name {
  47. font-size: 14px;
  48. color: #606266;
  49. line-height: 20px;
  50. margin-left: 10px;
  51. }
  52. .file {
  53. position: relative;
  54. display: inline-block;
  55. background: #409eff;
  56. border: 1px solid #409eff;
  57. border-radius: 4px;
  58. padding: 4px 12px;
  59. overflow: hidden;
  60. color: #fff;
  61. text-decoration: none;
  62. text-indent: 0;
  63. line-height: 20px;
  64. font-size: 14px;
  65. }
  66. .file input {
  67. position: absolute;
  68. font-size: 100px;
  69. right: 0;
  70. top: 0;
  71. opacity: 0;
  72. }
  73. .file:hover {
  74. background: #409eff;
  75. border-color: #409eff;
  76. color: #fff;
  77. text-decoration: none;
  78. }
  79. .number input {
  80. -webkit-appearance: none;
  81. background-color: #fff;
  82. background-image: none;
  83. border-radius: 4px;
  84. border: 1px solid #dcdfe6;
  85. box-sizing: border-box;
  86. color: #606266;
  87. display: inline-block;
  88. font-size: inherit;
  89. height: 40px;
  90. line-height: 40px;
  91. outline: 0;
  92. padding: 0 15px;
  93. transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  94. width: 100%;
  95. }
  96. .submitBtn {
  97. display: inline-block;
  98. line-height: 1;
  99. white-space: nowrap;
  100. cursor: pointer;
  101. color: #fff;
  102. background-color: #409eff;
  103. border-color: #409eff;
  104. -webkit-appearance: none;
  105. text-align: center;
  106. box-sizing: border-box;
  107. outline: 0;
  108. margin: 20px 0px;
  109. transition: .1s;
  110. font-weight: 500;
  111. padding: 12px 20px;
  112. font-size: 14px;
  113. border-radius: 4px;
  114. }
  115. </style>
  116. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  117. <script>
  118. $(document).ready(function () {
  119. $(".file").on("change", "input[type='file']", function () {
  120. var filePath = $(this).val();
  121. var arr = filePath.split('\\');
  122. var fileName = arr[arr.length - 1];
  123. document.getElementById('showFileName').innerHTML = fileName;
  124. })
  125. });
  126. </script>
  127. </head>
  128. <!--<body>-->
  129. <!-- {% if message %}-->
  130. <!-- <p style="color:red">{{ message }}</p>-->
  131. <!-- {% endif %}-->
  132. <!-- <form action="/generation" method="post" enctype="multipart/form-data">-->
  133. <!-- <legend>Please sign in:</legend>-->
  134. <!-- <p><input name="dxf_file" placeholder="dxf_file" type="file"></p>-->
  135. <!-- <p><input name="area" placeholder="面积" type="number"></p>-->
  136. <!-- <p><button type="submit">提交户型轮廓文件</button></p>-->
  137. <!-- </form>-->
  138. <!--</body>-->
  139. <body style="margin: 0;padding: 0; background: #F2F6FC;">
  140. <div class="header">mvp</div>
  141. <form action="/excel_upload" method="post" enctype="multipart/form-data">
  142. <div class="form">
  143. <div class="message">
  144. {% if message %}
  145. {{ message }}
  146. {% endif %}
  147. </div>
  148. <div class="file-row">
  149. <div class="title">文件:</div>
  150. <a href="javascript:;" class="file">选择文件
  151. <input name="mvp_excel" placeholder="mvp_excel" type="file">
  152. </a>
  153. <div class="file-name" id="showFileName"></div>
  154. </div>
  155. <div class="file-row">
  156. <div class="title">邮箱:</div>
  157. <div class="number">
  158. <input name="email" placeholder="请输入邮箱" type="number">
  159. </div>
  160. </div>
  161. <button type="submit" class="submitBtn">确认更新</button>
  162. </div>
  163. </form>
  164. </body>
  165. </html>