不同的页面实现本地上传和拍照上传

IROCMdjango/static/css/style.css

@@ -67,8 +67,8 @@ span{letter-spacing:0}
 
 .form-control:focus{outline:none!important;box-shadow:none!important;border-color:#FF662A!important}
 .form-control{box-shadow:none!important}
-.btn-1{position:relative;padding:14px 10px;color:#FFF;min-width:200px;text-align:center;display:inline-flex;align-items:center;justify-content:center;height:60px;transition:1.5s ease;border:1px solid #FFF;border-radius:6px;cursor:pointer;z-index:1}
-.btn-1 a{color:#FFFFFF}
+.btn-1{position:relative;padding:14px 10px;color:#000;min-width:200px;text-align:center;display:inline-flex;align-items:center;justify-content:center;height:60px;transition:1.5s ease;border:1px solid #FFF;border-radius:6px;cursor:pointer;z-index:1}
+.btn-1 a{color:#FF662A}
 .btn-2{padding:14px 45px;color:#FF662A;background:#FFF;display:inline-block;min-width:170px;cursor:pointer;height:60px;text-align:center;font-weight:500;border-radius:6px;font-size:16px}
 .scroll-top{position:fixed;right:30px;bottom:70px;z-index:99;opacity:0;cursor:pointer;transition:.5s ease;border:0;background:transparent}
 .scroll-top::before{position:absolute;content:'';background:url(../img/poka.png);background-size:cover;background-position:center;animation:spin 4s infinite;animation-duration:6000ms;animation-delay:2s;animation-timing-function:ease-in;left:0;top:1px;width:100%;height:100%;z-index:-1}

IROCMdjango/templates/IROCM/camera.html

@@ -72,7 +72,7 @@
         <div class="hero-content">
           <h1>拍照上传</h1>
           <ul>
-            <li>拍照上传 |</li>
+            <li>拍照上传 | </li>
             <li>中医药药材识别系统</li>
           </ul>
         </div>
@@ -87,7 +87,7 @@
 		  <form margin-bottom="100px" action="/camera/" method="POST" enctype="multipart/form-data">
             {% csrf_token %}
             <!-- 不知道为什么这里input file类型会导致显示不全 -->
-            <input type="submit" value="拍照上传"/>
+            <button class="btn-1"><input type="submit" value="点此拍照上传文件"/></button>
           </form>
 
 

IROCMdjango/templates/IROCM/index.html

@@ -69,7 +69,7 @@
         <div class="hero-content">
           <h1>欢迎使用</h1>
           <ul>
-            <li>主页 |</li>
+            <li>主页 | </li>
             <li>中医药药材识别系统</li>
           </ul>
         </div>

IROCMdjango/templates/IROCM/results.html

@@ -70,7 +70,7 @@
         <div class="hero-content">
           <h1>识别结果</h1>
           <ul>
-            <li>识别结果 |</li>
+            <li>识别结果 | </li>
             <li>中医药药材识别系统</li>
           </ul>
         </div>
@@ -92,7 +92,7 @@
             <h6>药材信息</h6>
             <div class="pro-info-left">
               <p><span>中文名：</span>{{ data }}</p>
-              <p>{{info}}</p>
+              <p>{{ info }}</p>
             </div>
           </div>
 

IROCMdjango/templates/IROCM/upload.html

@@ -84,11 +84,15 @@
   <div class="container">
     <div class="row">
       <div class="col-md-12" height="20px">
+
+
 		  <form margin-bottom="100px" action="/upload/" method="POST" enctype="multipart/form-data">
             {% csrf_token %}
             <!-- 不知道为什么这里input file类型会导致显示不全 -->
-            <input type="file" name="upfile" enctype="multpart/form-data"/>
-            <input type="submit" value="点击上传"/>
+            <h4>点击下方按钮选择文件👇</h4>
+            <button class="btn-1"><input type="file" name="upfile" enctype="multpart/form-data" style="opacity: 0;length: 10px"/></button>
+            <br>
+            <button class="btn-1"><input type="submit" value="点此上传文件"/></button>
           </form>
 
 
@@ -109,5 +113,4 @@
 </footer>
 
 </body>
-</html>
-
+</html>