根据客户的要求，在上传附件的时候，想和平时用的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
完整的代码:
- <html><head>
- <title></title>
- 具体两个函数是这样的：
- <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);
- }
- function insertHtml(where, el, html){
- wherewhere = where.toLowerCase();
- if(el.insertAdjacentHTML){
- switch(where){
- case "beforebegin":
- el.insertAdjacentHTML('BeforeBegin', html);
- return el.previousSibling;
- case "afterbegin":
- el.insertAdjacentHTML('AfterBegin', html);
- return el.firstChild;
- case "beforeend":
- el.insertAdjacentHTML('BeforeEnd', html);
- return el.lastChild;
- case "afterend":
- el.insertAdjacentHTML('AfterEnd', html);
- return el.nextSibling;
- }
- throw 'Illegal insertion point -> "' + where + '"';
- }
- var range = el.ownerDocument.createRange();
- var frag;
- switch(where){
- case "beforebegin":
- range.setStartBefore(el);
- frag = range.createContextualFragment(html);
- el.parentNode.insertBefore(frag, el);
- return el.previousSibling;
- case "afterbegin":
- if(el.firstChild){
- range.setStartBefore(el.firstChild);
- frag = range.createContextualFragment(html);
- el.insertBefore(frag, el.firstChild);
- return el.firstChild;
- }else{
- el.innerHTML = html;
- return el.firstChild;
- }
- case "beforeend":
- if(el.lastChild){
- range.setStartAfter(el.lastChild);
- frag = range.createContextualFragment(html);
- el.appendChild(frag);
- return el.lastChild;
- }else{
- el.innerHTML = html;
- return el.lastChild;
- }
- case "afterend":
- range.setStartAfter(el);
- frag = range.createContextualFragment(html);
- el.parentNode.insertBefore(frag, el.nextSibling);
- return el.nextSibling;
- }
- throw 'Illegal insertion point -> "' + where + '"';
- }
- </script>
- </head>
- <body>
- <form name="date_form">
- <div>
- <input type="button" value="添加附件(Add)" onclick="addFile('myfile')">
- </div>
- <div id="myfile">
- </div>
- </form>
- </body>
- </html>