不住增加图片上传

qingdan.html

@@ -275,8 +275,14 @@
                   <div class="col">
                     <div class="form-group">
                       <a class="pull-right" href="javacript:void(0);" data-toggle="modal" data-target="#help" >html怎么写？</a>
+                       <a class="pull-right mr-3" href="javacript:void(0);" data-toggle="modal" data-target="#uploadimg" ><i class="fa fa-image"></i>上传图片</a>
                       <label for="exampleTextarea">补注：</label>
-                      <textarea id="editor" name="editor" class="form-control" rows="8"></textarea>
+                    </div>
+                    <div class="tab-content">
+                      <div class="tab-pane active">
+                        <textarea id="editor" name="editor" class="form-control" rows="8"></textarea>
+
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -397,6 +403,62 @@
             </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>
+    </div>    
     <!--弹出html填写帮助-->
     <div class="modal fade" id="help" style="display: none;" aria-hidden="true">
         <div class="modal-dialog" role="document">
@@ -408,19 +470,19 @@
                   </button>
                 </div>
                 <div class="modal-body">
-                    <p>&lt;p&gt;这是一行文本&lt;/p&gt;</p>
+                    <p class="text-primary">&lt;p&gt;这是一行文本&lt;/p&gt;</p>
                     <p class="mb-0">文本居中：text-center</p>
-                    <p>&lt;p class="text-center" &gt;这是一行文本&lt;/p&gt;</p>
+                    <p class="text-primary">&lt;p class="text-center" &gt;这是一行文本&lt;/p&gt;</p>
                     <p class="mb-0">文本居右：text-right</p>
-                    <p>&lt;p class="text-right" &gt;这是一行文本&lt;/p&gt;</p>
+                    <p class="text-primary">&lt;p class="text-right" &gt;这是一行文本&lt;/p&gt;</p>
                     <p class="mb-0">文本居左（默认已居左）：text-left</p>
-                    <p>&lt;p class="text-left" &gt;这是一行文本&lt;/p&gt;</p>
+                    <p class="text-primary">&lt;p class="text-left" &gt;这是一行文本&lt;/p&gt;</p>
                     <p class="mb-0">表格：table、tr、th、td</p>
-                    <p class="mb-0">&lt;table&gt;</p>
-                    <p class="mb-0">&lt;tr&gt;&lt;th&gt;表头1&lt;/th&gt;&lt;th&gt;表头2&lt;/th&gt;&lt;th&gt;表头3&lt;/th&gt;&lt;/tr&gt;</p>
-                    <p class="mb-0">&lt;tr&gt;&lt;td&gt;内容1&lt;/td&gt;&lt;td&gt;内容2&lt;/td&gt;&lt;td&gt;内容3&lt;/td&gt;&lt;/tr&gt;</p>
-                    <p class="mb-0">&lt;tr&gt;&lt;td&gt;内容4&lt;/td&gt;&lt;td&gt;内容5&lt;/td&gt;&lt;td&gt;内容6&lt;/td&gt;&lt;/tr&gt;</p>
-                    <p class="mb-0">&lt;/table&gt;</p>
+                    <p class="mb-0 text-primary">&lt;table&gt;</p>
+                    <p class="mb-0 text-primary">&lt;tr&gt;&lt;th&gt;表头1&lt;/th&gt;&lt;th&gt;表头2&lt;/th&gt;&lt;th&gt;表头3&lt;/th&gt;&lt;/tr&gt;</p>
+                    <p class="mb-0 text-primary">&lt;tr&gt;&lt;td&gt;内容1&lt;/td&gt;&lt;td&gt;内容2&lt;/td&gt;&lt;td&gt;内容3&lt;/td&gt;&lt;/tr&gt;</p>
+                    <p class="mb-0 text-primary">&lt;tr&gt;&lt;td&gt;内容4&lt;/td&gt;&lt;td&gt;内容5&lt;/td&gt;&lt;td&gt;内容6&lt;/td&gt;&lt;/tr&gt;</p>
+                    <p class="mb-0 text-primary">&lt;/table&gt;</p>
                     <p>
                       <table class="table table-sm table-bordered">
                         <tr><th>表头1</th><th>表头2</th><th>表头3</th></tr>
@@ -429,11 +491,11 @@
                       </table>
                     </p>
                     <p class="mb-0">合并横向单元格(2格)：colspan="2"</p>
-                    <p class="mb-0">&lt;table&gt;</p>
-                    <p class="mb-0">&lt;tr&gt;&lt;th colspan="2"&gt;表头1表头2&lt;/th&gt;&lt;th&gt;表头3&lt;/th&gt;&lt;/tr&gt;</p>
-                    <p class="mb-0">&lt;tr&gt;&lt;td&gt;内容1&lt;/td&gt;&lt;td&gt;内容2&lt;/td&gt;&lt;td&gt;内容3&lt;/td&gt;&lt;/tr&gt;</p>
-                    <p class="mb-0">&lt;tr&gt;&lt;td&gt;内容4&lt;/td&gt;&lt;td&gt;内容5&lt;/td&gt;&lt;td&gt;内容6&lt;/td&gt;&lt;/tr&gt;</p>
-                    <p class="mb-0">&lt;/table&gt;</p>
+                    <p class="mb-0 text-primary">&lt;table&gt;</p>
+                    <p class="mb-0 text-primary">&lt;tr&gt;&lt;th colspan="2"&gt;表头1表头2&lt;/th&gt;&lt;th&gt;表头3&lt;/th&gt;&lt;/tr&gt;</p>
+                    <p class="mb-0 text-primary">&lt;tr&gt;&lt;td&gt;内容1&lt;/td&gt;&lt;td&gt;内容2&lt;/td&gt;&lt;td&gt;内容3&lt;/td&gt;&lt;/tr&gt;</p>
+                    <p class="mb-0 text-primary">&lt;tr&gt;&lt;td&gt;内容4&lt;/td&gt;&lt;td&gt;内容5&lt;/td&gt;&lt;td&gt;内容6&lt;/td&gt;&lt;/tr&gt;</p>
+                    <p class="mb-0 text-primary">&lt;/table&gt;</p>
                     <p>
                       <table class="table table-sm table-bordered">
                         <tr><th colspan="2">表头1表头2</th><th>表头3</th></tr>
@@ -442,11 +504,11 @@
                       </table>
                     </p>
                     <p class="mb-0">合并竖向单元格(2格)：rowspan="2"</p>
-                    <p class="mb-0">&lt;table&gt;</p>
-                    <p class="mb-0">&lt;tr&gt;&lt;th&gt;表头1&lt;/th&gt;&lt;th&gt;表头2&lt;/th&gt;&lt;th&gt;表头3&lt;/th&gt;&lt;/tr&gt;</p>
-                    <p class="mb-0">&lt;tr&gt;&lt;td rowspan="2"&gt;内容1内容4&lt;/td&gt;&lt;td&gt;内容2&lt;/td&gt;&lt;td&gt;内容3&lt;/td&gt;&lt;/tr&gt;</p>
-                    <p class="mb-0">&lt;tr&gt;&lt;td&gt;内容5&lt;/td&gt;&lt;td&gt;内容6&lt;/td&gt;&lt;/tr&gt;</p>
-                    <p class="mb-0">&lt;/table&gt;</p>
+                    <p class="mb-0 text-primary">&lt;table&gt;</p>
+                    <p class="mb-0 text-primary">&lt;tr&gt;&lt;th&gt;表头1&lt;/th&gt;&lt;th&gt;表头2&lt;/th&gt;&lt;th&gt;表头3&lt;/th&gt;&lt;/tr&gt;</p>
+                    <p class="mb-0 text-primary">&lt;tr&gt;&lt;td rowspan="2"&gt;内容1内容4&lt;/td&gt;&lt;td&gt;内容2&lt;/td&gt;&lt;td&gt;内容3&lt;/td&gt;&lt;/tr&gt;</p>
+                    <p class="mb-0 text-primary">&lt;tr&gt;&lt;td&gt;内容5&lt;/td&gt;&lt;td&gt;内容6&lt;/td&gt;&lt;/tr&gt;</p>
+                    <p class="mb-0 text-primary">&lt;/table&gt;</p>
                     <p>
                       <table class="table table-sm table-bordered">
                         <tr><th colspan="2">表头1表头2</th><th>表头3</th></tr>