html 动态添加和删除文件选择框及脚本的兼容性问题。

根据客户的要求,在上传附件的时候,想和平时用的Gmail等一样,可以动态添加和删除文件选择框,然后一次性上传。

从理论上看,实现起来比较容易,但实际工作的时候还是遇到两个难点,这些难点归结起来都是一个原因造成的,那就是浏览器的兼容性。在脚本中要用到两个函数:insertAdjacentHTML和removeChild,而恰好这两个函数在Firefox下都不能正常使用。几乎花费了一天的时候,在网上搜索着解决的方法,还好被找到了,也让我大松一口气。

具体两个函数是这样的:
<script type="text/javascript">
//删除文件选择框
function removeFile(id) {
var new_tr = id.parentNode;
try {
//new_tr.removeNode(true);
// just ie , not w3c;

// other idea
var tmp = new_tr.parentNode;
// 为了在ie和firefox下都能正常使用,就要用另一个方法代替,最取上一层的父结点,然后remove.
tmp.removeChild(new_tr);

} catch(e) {}
}

//添加文件选择框
function addFile(id)
{
var str = '<div><input type="file" runat="server" name="file" onKeyDown="this.blur();" oncontextmenu="return false" /><input type="button" value="删除" style="height:22px;" onclick="removeFile(this)" /></div>'
insertHtml("beforeend",document.getElementById(id),str);
}
</script>

页面上这样引用:

<div>
<input type="button" value="添加附件(Add)" onclick="addFile('myfile')">
</div>
<div id="myfile">
</div>

在addFile函数中引用了另一个函数:insertHtml,这个函数主要是针对insertAdjacentHTML在firefox下无效的情况重写的,具体可以通过搜索insertAdjacentHTML找到。

来自:http://blog.csdn.net/gaofeng2000/archive/2008/10/22/3125412.aspx#933487

完整的代码:

  1. <html><head>
  2. <title></title>
  3. 具体两个函数是这样的:
  4. <scripttype="text/javascript">
  5. //删除文件选择框
  6. functionremoveFile(id){
  7. varnew_tr=id.parentNode;
  8. try{
  9. //new_tr.removeNode(true);
  10. //justie,notw3c;
  11. //otheridea
  12. vartmp=new_tr.parentNode;
  13. //为了在ie和firefox下都能正常使用,就要用另一个方法代替,最取上一层的父结点,然后remove.
  14. tmp.removeChild(new_tr);
  15. }catch(e){}
  16. }
  17. //添加文件选择框
  18. functionaddFile(id)
  19. {
  20. varstr='<div><inputtype="file"runat="server"name="file"onKeyDown="this.blur();"oncontextmenu="returnfalse"/><inputtype="button"value="删除"style="height:22px;"onclick="removeFile(this)"/></div>'
  21. insertHtml("beforeend",document.getElementById(id),str);
  22. }
  23. functioninsertHtml(where,el,html){
  24. wherewhere=where.toLowerCase();
  25. if(el.insertAdjacentHTML){
  26. switch(where){
  27. case"beforebegin":
  28. el.insertAdjacentHTML('BeforeBegin',html);
  29. returnel.previousSibling;
  30. case"afterbegin":
  31. el.insertAdjacentHTML('AfterBegin',html);
  32. returnel.firstChild;
  33. case"beforeend":
  34. el.insertAdjacentHTML('BeforeEnd',html);
  35. returnel.lastChild;
  36. case"afterend":
  37. el.insertAdjacentHTML('AfterEnd',html);
  38. returnel.nextSibling;
  39. }
  40. throw'Illegalinsertionpoint->"'+where+'"';
  41. }
  42. varrange=el.ownerDocument.createRange();
  43. varfrag;
  44. switch(where){
  45. case"beforebegin":
  46. range.setStartBefore(el);
  47. frag=range.createContextualFragment(html);
  48. el.parentNode.insertBefore(frag,el);
  49. returnel.previousSibling;
  50. case"afterbegin":
  51. if(el.firstChild){
  52. range.setStartBefore(el.firstChild);
  53. frag=range.createContextualFragment(html);
  54. el.insertBefore(frag,el.firstChild);
  55. returnel.firstChild;
  56. }else{
  57. el.innerHTML=html;
  58. returnel.firstChild;
  59. }
  60. case"beforeend":
  61. if(el.lastChild){
  62. range.setStartAfter(el.lastChild);
  63. frag=range.createContextualFragment(html);
  64. el.appendChild(frag);
  65. returnel.lastChild;
  66. }else{
  67. el.innerHTML=html;
  68. returnel.lastChild;
  69. }
  70. case"afterend":
  71. range.setStartAfter(el);
  72. frag=range.createContextualFragment(html);
  73. el.parentNode.insertBefore(frag,el.nextSibling);
  74. returnel.nextSibling;
  75. }
  76. throw'Illegalinsertionpoint->"'+where+'"';
  77. }
  78. </script>
  79. </head>
  80. <body>
  81. <formname="date_form">
  82. <div>
  83. <inputtype="button"value="添加附件(Add)"onclick="addFile('myfile')">
  84. </div>
  85. <divid="myfile">
  86. </div>
  87. </form>
  88. </body>
  89. </html>

你可能感兴趣的:(html)