Browse Source

HTML增加图片上传

Chente 6 năm trước cách đây
mục cha
commit
2b8f705d71
2 tập tin đã thay đổi với 57 bổ sung1 xóa
  1. 57 1
      dinge.html
  2. BIN
      img/aegsf.jpg

+ 57 - 1
dinge.html

@@ -206,7 +206,8 @@
                         </div>
                         <!--说明-->
                         <div class="tab-pane" id="tsm" role="tabpanel">
-                          <p class="ml-3 mt-3"><a href="javacript:void(0);" data-toggle="modal" data-target="#help" >html怎么写?</a></p>
+                          <p class="ml-3 mt-3">
+                       <a class="mr-3" href="javacript:void(0);" data-toggle="modal" data-target="#uploadimg" ><i class="fa fa-image"></i>上传图片</a><a href="javacript:void(0);" data-toggle="modal" data-target="#help" >html怎么写?</a></p>
                             <textarea id="editor" name="editor" class="form-control "></textarea>
                         </div>
                         <!--计算规则-->
@@ -548,6 +549,61 @@
             </div>
         </div>
     </div>
+    <!--弹出上传图片-->
+    <div class="modal fade" id="uploadimg" data-backdrop="static" style="display: none;" aria-hidden="true">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title">上传图片</h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                  </button>
+                </div>
+                <div class="modal-body">
+                    <div class="card mb-3">
+                      <div class="card-block">
+                        <div class="form-group">
+                          <input type="file">
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="col-4">
+                        <div class="card">
+                          <img class="card-img-top" src="img/baobiao.png" alt="Card image cap" height="180px">
+                          <div class="card-block">
+                            <p class="card-text"><input class="form-control form-control-sm" value="<img src='http://smar.com/images/22.jpg'>" readonly=""><small class="mr-2">2018-09-01 上传</small><a href="#" class="text-danger">删除</a></p>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-4">
+                        <div class="card">
+                          <img class="card-img-top" src="img/aegsf.jpg" alt="Card image cap" height="180px">
+                          <div class="card-block">
+                            <p class="card-text"><input class="form-control form-control-sm" value="<img src='http://smar.com/images/22.jpg'>" readonly=""><small class="mr-2">2018-09-01 上传</small><a href="#" class="text-danger">删除</a></p>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-4">
+                        <div class="card">
+                          <img class="card-img-top" src="img/baobiao.png" alt="Card image cap" height="180px">
+                          <div class="card-block">
+                            <p class="card-text"><input class="form-control form-control-sm" value="<img src='http://smar.com/images/22.jpg'>" readonly=""><small class="mr-2">2018-09-01 上传</small><a href="#" class="text-danger">删除</a></p>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="btn-group ml-3 mt-3">
+                        <button class="btn btn-sm btn-secondary" disabled="">上一页</button>
+                        <button class="btn btn-sm btn-secondary disabled">1 / 3</button>
+                        <button class="btn btn-sm btn-secondary">下一页</button>
+                      </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                </div>
+            </div>
+        </div>    
     <!--弹出html填写帮助-->
     <div class="modal fade" id="help" style="display: none;" aria-hidden="true">
         <div class="modal-dialog" role="document">

BIN
img/aegsf.jpg