• 用javascript+asp.net批量上传相片的经验总结。


    需求:
      在一个相册时批量上传相片。相片具有相片标题、相片描述等信息。
    ---
      如果单独的批量上传相片,那没有啥可说的。NET的上传功能可说绰绰有余。只要记得
      <form enctype="multipart/form-data" .......就可以了。
    ---
     第一个: 需要考虑的是每张照片对应它自己的标题和描述。。。考虑了一下,我最后采用,在动态添加上传表单时
      给予相应的文本框加name="title1" name="title2"这样的形式来一一对应。
     第二个: 需要考虑的是如何通过JS动态添加。。
      根据以前在网上看过的多文件上传的实现,真实我用 ***.innerHTML=****的形式来为某个容器动态添加项实现。
      不过,发现如果某些上传表单已经有选过文件,此时再用innerHTML+=****的形式的话, 原来已选的内容会被重置。
      最后决定用 ***.insertAdjacentHTML(position,nhtml)的形式来实现。需要注意的是在FF下并不支持这个函数。具体的兼容方案在代码中。
     第三个: FF不支持removeNode(true|false)的解决办法:使用***.parentNode.removeChild(***)的形式来兼容。
    --------
         总结:单纯的文件上传功能应该很简单,动态添加要注意的就是IE与FF等其它浏览器的兼容。
    ----
      运行效果图:
     111.jpg222.jpg

    ---
     附上主要的JS代码:
     
     1<script type="text/javascript" language="javascript">
     2<!--
     3//多相片上传动态增加
     4       var num=0;    
     5       if(!document.all) //非IE类下注册
     6       {
     7           HTMLElement.prototype.insertAdjacentHTML=function(where, html) 
     8            
     9            var e=this.ownerDocument.createRange(); 
    10            e.setStartBefore(this); 
    11            e=e.createContextualFragment(html); 
    12            switch (where) 
    13            
    14                case 'beforeBegin'this.parentNode.insertBefore(e, this);break
    15                case 'afterBegin'this.insertBefore(e, this.firstChild); break
    16                case 'beforeEnd'this.appendChild(e); break
    17                case 'afterEnd'
    18                if(!this.nextSibling) this.parentNode.appendChild(e); 
    19                else this.parentNode.insertBefore(e, this.nextSibling); break
    20                }
     
    21            }
    ;
    22       }

    23       function AddNew()
    24       {
    25         num++;
    26         if(num>=2)
    27         {
    28            var parObj=document.getElementById("upfiles"+(num-1));
    29            var reBtn=document.getElementById("remove"+(num-1));
    30            if(document.all)
    31            {
    32               reBtn.removeNode(true);
    33            }

    34            else
    35            {
    36               reBtn.parentNode.removeChild(reBtn)
    37            }

    38         }

    39         var nhtml="<div id=\"upfiles"+num+"\" ><br /><fieldset><legend id=\"add"+num+"\" name=\"add"+num+"\" title=\"上传框\">上传相片<input type=\"button\" id=\"remove"+num+"\" name=\"remove"+num+"\" onclick=\"Remove("+num+")\" value=\"取消该上传\" /></legend>";
    40         nhtml+="照片标题:<input type=\"text\"  id=\"PhotoTitle"+num+"\" name=\"PhotoTitle"+num+"\"/><span class=\"fon1\">*</span><br />";
    41         nhtml+="照片描述:<textarea id=\"PhotoText"+num+"\" name=\"PhotoText"+num+"\" rows=\"6\" cols=\"50\" ></textarea><br />";
    42         nhtml+="图片文件:<input type=\"file\" id=\"PhotoFile\" name=\"PhotoFile\" /><span class=\"fon1\">*</span></fieldset><br /></div>";
    43         document.getElementById("FileTable").insertAdjacentHTML("beforeEnd",nhtml);
    44       }

    45       function Remove(currentnum)
    46       {
    47          var parObj=document.getElementById("FileTable");
    48          var current=document.getElementById("upfiles"+parseInt(currentnum));
    49          parObj.removeChild(current);
    50          num--;
    51          if(num>=1)
    52          {
    53            var leg=document.getElementById("add"+(num));
    54            var btnHtml="<input type=\"button\" id=\"remove"+num+"\" name=\"remove"+num+"\" onclick=\"Remove("+(num)+")\" value=\"取消该上传\" />"
    55            leg.insertAdjacentHTML("beforeEnd",btnHtml);
    56          }

    57       }

    58//end
    59//-->
    60</script>

    其中肯定有不合理或错误的地方。请各位达人指正。
  • 相关阅读:
    数据库第三范式的思考
    channel通道例子
    go 测试代码性能实例
    go 新建項目引入gin失敗
    go 创建切片slice的四种方法
    Hibernate查询操作
    shell 分割训练数据
    hadoop streaming 分桶到不同的part
    C语言调用另一个文件的方法
    在springboot中使用jdbcTemplate(3)
  • 原文地址:https://www.cnblogs.com/McJeremy/p/1205007.html
Copyright © 2020-2023  润新知