zy: to zjq to modify multi-picture

app/views/micro_posts/show.html.erb

@@ -38,7 +38,9 @@
             <div class="form-group">
               <div class="col-md-12">
                 <div id="image-upload">
-                  上传图片占位符
+                  <div id="total">当前选择上传0个图片</div><input class="btn btn-default" type="button" value="添加图片" id="btnAdd" onclick="selectAttachment();">&nbsp;
+                  <input type="button" value="清空图片" id="btnClear" style="display:none" onclick="clearAttachment();">
+                  <div id="attachmentList"></div>
                 </div>
               </div>
             </div>
@@ -49,7 +51,6 @@
               </div>
             </div>
         <% end %>
-
       </div>
     </row>
 
@@ -67,7 +68,7 @@
 
             <div class="col-md-12">
               <p>
-                <%= micro_post["content"]%>
+                <%= micro_post["content"] %>
               </p>
             </div>
 
@@ -81,3 +82,104 @@
     </row>
   </div>
 </div>
+
+<script type="text/javascript">
+  var i = 0; // 用来动态生成span,upfile的id
+  function addAttachmentToList() {
+    if (findAttachment(event.srcElement.value)) return; //如果此文档已在图片列表中则不再添加
+
+    // 动态创建图片信息栏并添加到图片列表中
+    var span = document.createElement('span');
+    span.id = '_attachment' + i;
+    span.innerHTML = extractFileName(event.srcElement.value) + '&nbsp;<a href="javascript:delAttachment(' + (i++) + ')"><font color="blue">删除</font></a><br/>';
+    span.title = event.srcElement.value;
+    G('attachmentList').appendChild(span);
+
+    // 显示图片列表并变换添加图片按钮文本
+    if (G('attachmentList').style.display == 'none') {
+      G('btnAdd').value = '继续添加';
+      G('attachmentList').style.display = '';
+      G('btnClear').style.display = '';
+    }
+
+    G('total').innerText = '当前选择上传' + G('attachmentList').childNodes.length + '个图片';
+  }
+
+  function selectAttachment() {
+    // 先清除无效动态生成的多余upfile
+    cleanInvalidUpfile();
+
+    // 动态创建上传控件并与span对应
+    var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile' + i + '">';
+    document.body.insertAdjacentHTML('beforeEnd', upfile);
+    G('_upfile' + i).click();
+  }
+
+  function extractFileName(fn) {
+    var index = fn.substr(fn.lastIndexOf('.')).toLowerCase();
+    if (index == '.png' || index == '.jpg' || index == '.jpeg') {
+      return fn.substr(fn.lastIndexOf('\\')+1);
+    }
+    else {
+      alert('请上传.png或.jpg格式的图片!');
+      return 0;
+    }
+  }
+
+  function findAttachment(fn) {
+    var o = G('attachmentList').getElementsByTagName('span');
+    for (var i = 0; i < o.length; i++)
+      if (o[i].title == fn) return true;
+    return false;
+  }
+
+  function delAttachment(id) {
+    G('attachmentList').removeChild(G('_attachment' + id));
+    document.body.removeChild(G('_upfile' + id));
+
+    // 当图片列表为空则不显示并且变化添加图片按钮文本
+    if (G('attachmentList').childNodes.length == 0) {
+      G('btnAdd').value = '添加图片';
+      G('attachmentList').style.display = 'none';
+      G('btnClear').style.display = 'none';
+    }
+
+    G('total').innerText = '当前选择上传' + G('attachmentList').childNodes.length + '个图片';
+  }
+
+  function cleanInvalidUpfile() {
+    var o = document.body.getElementsByTagName('input');
+    for (var i = o.length - 1; i >= 0; i--)
+      if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0) {
+        if (!G('_attachment' + o[i].id.substr(7)))
+          document.body.removeChild(o[i]);
+      }
+  }
+
+  function clearAttachment() {
+    var o = G('attachmentList').childNodes;
+    for (var i = o.length - 1; i >= 0; i--)
+      G('attachmentList').removeChild(o[i]);
+
+    o = document.body.getElementsByTagName('input');
+    for (var i = o.length - 1; i >= 0; i--)
+      if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0) {
+        document.body.removeChild(o[i]);
+      }
+
+    G('btnAdd').value = '添加图片';
+    G('attachmentList').style.display = 'none';
+    G('btnClear').style.display = 'none';
+    G('total').innerText = '当前选择上传0个图片';
+
+  }
+
+  function getAttachmentInfo() {
+    // 已知的js获取本地文件大小的三种方式
+
+  }
+
+  function G(id) {
+    return document.getElementById(id);
+  }
+</script>

tmp/pids/server.pid

@@ -1 +1 @@
-2205
+5504

多图片上传.html

@@ -108,7 +108,6 @@ function G(id)
 </script>
 </HEAD>
 <BODY>
-<fieldset style="border:1px solid;text-align:left;FONT-SIZE:12px;font-family: Verdana;padding:5px;">
 <form action="#">
 <input type="button" value="添加图片" id="btnAdd" onclick="selectAttachment();">&nbsp;
 <input type="button" value="清空图片" id="btnClear" style="display:none" onclick="clearAttachment();">