zy:modify pic

app/views/micro_posts/show.html.erb

@@ -125,99 +125,120 @@
 </div>
 
 <script type="text/javascript">
-  var pic_num = 0; // 用来动态生成span,upfile的id
+  var pic_num = 0,pic_maxnum = 5; // 用来动态生成span,upfile的id,一次上传图片数量接口
-  function addAttachmentToList() {
+
-    if (findAttachment(event.srcElement.value)) return; //如果此文档已在图片列表中则不再添加
+  function addAttachmentToList()
-    if (extractFileName(event.srcElement.value)) {
+  {
+    if (findAttachment(event.srcElement.value)){
+
+      var o = G('pics').getElementsByTagName('input');
+      var len = o.length-1;
+      G('pics').removeChild(o[len]);
+      return;
+    }; //如果此文档已在图片列表中则不再添加
+    if (extractFileName(event.srcElement.value)){
       // 动态创建图片信息栏并添加到图片列表中
       var span = document.createElement('span');
       span.id = '_attachment' + pic_num;
-      span.innerHTML = extractFileName(event.srcElement.value) +
+      span.innerHTML = extractFileName(event.srcElement.value) + '&nbsp;<a href="javascript:delAttachment(' + (pic_num++) + ')">删除</a><br/>';
-          '&nbsp;<a href="javascript:delAttachment(' + (pic_num++) + ')">删除</a><br/>';
       span.title = event.srcElement.value;
       G('attachmentList').appendChild(span);
     }
+
     // 显示图片列表并变换添加图片按钮文本
-    if (G('attachmentList').style.display == 'none') {
+    if (G('attachmentList').style.display == 'none')
+    {
       G('btnAdd').value = '继续添加';
       G('attachmentList').style.display = '';
       G('btnClear').style.display = '';
     }
 
-    G('total').innerText = '当前选择上传' + G('attachmentList').childNodes.length + '个图片';
+    G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个图片';
+
   }
 
-  function selectAttachment() {
+  function selectAttachment()
+  {
     // 先清除无效动态生成的多余upfile
+
     cleanInvalidUpfile();
 
-    // 动态创建上传控件并与span对应
+    if(pic_num < pic_maxnum ) {//图片数量控制
-    var upfile = '<input type="file" style="display:none" multiple name="pictures[]" onchange="addAttachmentToList();" id="_upfile' + pic_num + '">';
+
-    G('pics').insertAdjacentHTML('beforeEnd', upfile);
+      var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile'+pic_num+'">';// 动态创建上传控件并与span对应
-    G('_upfile' + pic_num).click();
+      G('pics').insertAdjacentHTML('beforeEnd', upfile);
+      G('_upfile'+pic_num).click();
+    }
+    else alert("一次只能上传"+pic_maxnum+"张图片！");
   }
 
-  function extractFileName(fn) {
+  //判断图片格式
+  function extractFileName(fn)
+  {
     var index = fn.substr(fn.lastIndexOf('.')).toLowerCase();
-    if (index == '.png' || index == '.jpg' || index == '.jpeg') {
+    if (index ==".png"||index ==".jpg"||index ==".jpeg"){
-      return fn.substr(fn.lastIndexOf('\\') + 1);
+      return fn.substr(fn.lastIndexOf('\\')+1);
     }
-    else {
+    else{
-      alert('请上传.png或.jpg格式的图片!');
+      alert("请上传png或jpg格式的图片！");
       return 0;
     }
   }
 
-  function findAttachment(fn) {
+  function findAttachment(fn)
+  {
     var o = G('attachmentList').getElementsByTagName('span');
-    for (var i = 0; i < o.length; i++)
+    for(var i=0;i<o.length;i++)
-      if (o[i].title == fn) return true;
+    if (o[i].title == fn) return true;
-    return false;
+    else return false;
   }
 
-  function delAttachment(id) {
+  function delAttachment(id)
-    G('attachmentList').removeChild(G('_attachment' + id));
+  {
-    G('pics').removeChild(G('_upfile' + id));
+    G('attachmentList').removeChild(G('_attachment'+id));
-
+    G('pics').removeChild(G('_upfile'+id));
     // 当图片列表为空则不显示并且变化添加图片按钮文本
-    if (G('attachmentList').childNodes.length == 0) {
+    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 + '个图片';
-    G('total').innerText = '当前选择上传' + G('attachmentList').childNodes.length + '个图片';
   }
 
-  function cleanInvalidUpfile() {
+  function cleanInvalidUpfile()
-    var o = document.body.getElementsByTagName('input');
+  {
-    for (var i = o.length - 1; i >= 0; i--)
+    var o = G('pics').getElementsByTagName('input');
-      if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0) {
+    var len = o.length-1;
-        if (!G('_attachment' + o[i].id.substr(7)))
+    for(var i=o.len;i>=0;i--){
-          G('pics').removeChild(o[i]);
+      if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
+      {
+        if (!G('_attachment'+o[i].id.substr(7)))
+        G('pics').removeChild(o[i]);
       }
+    }
   }
 
-  function clearAttachment() {
+  function clearAttachment()
+  {
     var o = G('attachmentList').childNodes;
-    for (var i = o.length - 1; i >= 0; i--)
+    for(var i=o.length-1;i>=0;i--)
-      G('attachmentList').removeChild(o[i]);
+    G('attachmentList').removeChild(o[i]);
-
     o = document.body.getElementsByTagName('input');
-    for (var i = o.length - 1; i >= 0; i--)
+    for(var i=o.length-1;i>=0;i--)
-      if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0) {
+    if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
-        document.body.removeChild(o[i]);
+    {
-      }
+      G('pics').removeChild(o[i]);
+    }
 
     G('btnAdd').value = '添加图片';
     G('attachmentList').style.display = 'none';
     G('btnClear').style.display = 'none';
     G('total').innerText = '当前选择上传0个图片';
-
   }
-
+  function G(id)
-
+  {
-  function G(id) {
     return document.getElementById(id);
   }