根据客户的要求,在上传附件的时候,想和平时用的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>
- 具体两个函数是这样的:
- <scripttype="text/javascript">
- //删除文件选择框
- functionremoveFile(id){
- varnew_tr=id.parentNode;
- try{
- //new_tr.removeNode(true);
- //justie,notw3c;
- //otheridea
- vartmp=new_tr.parentNode;
- //为了在ie和firefox下都能正常使用,就要用另一个方法代替,最取上一层的父结点,然后remove.
- tmp.removeChild(new_tr);
- }catch(e){}
- }
- //添加文件选择框
- functionaddFile(id)
- {
- varstr='<div><inputtype="file"runat="server"name="file"onKeyDown="this.blur();"oncontextmenu="returnfalse"/><inputtype="button"value="删除"style="height:22px;"onclick="removeFile(this)"/></div>'
- insertHtml("beforeend",document.getElementById(id),str);
- }
- functioninsertHtml(where,el,html){
- wherewhere=where.toLowerCase();
- if(el.insertAdjacentHTML){
- switch(where){
- case"beforebegin":
- el.insertAdjacentHTML('BeforeBegin',html);
- returnel.previousSibling;
- case"afterbegin":
- el.insertAdjacentHTML('AfterBegin',html);
- returnel.firstChild;
- case"beforeend":
- el.insertAdjacentHTML('BeforeEnd',html);
- returnel.lastChild;
- case"afterend":
- el.insertAdjacentHTML('AfterEnd',html);
- returnel.nextSibling;
- }
- throw'Illegalinsertionpoint->"'+where+'"';
- }
- varrange=el.ownerDocument.createRange();
- varfrag;
- switch(where){
- case"beforebegin":
- range.setStartBefore(el);
- frag=range.createContextualFragment(html);
- el.parentNode.insertBefore(frag,el);
- returnel.previousSibling;
- case"afterbegin":
- if(el.firstChild){
- range.setStartBefore(el.firstChild);
- frag=range.createContextualFragment(html);
- el.insertBefore(frag,el.firstChild);
- returnel.firstChild;
- }else{
- el.innerHTML=html;
- returnel.firstChild;
- }
- case"beforeend":
- if(el.lastChild){
- range.setStartAfter(el.lastChild);
- frag=range.createContextualFragment(html);
- el.appendChild(frag);
- returnel.lastChild;
- }else{
- el.innerHTML=html;
- returnel.lastChild;
- }
- case"afterend":
- range.setStartAfter(el);
- frag=range.createContextualFragment(html);
- el.parentNode.insertBefore(frag,el.nextSibling);
- returnel.nextSibling;
- }
- throw'Illegalinsertionpoint->"'+where+'"';
- }
- </script>
- </head>
- <body>
- <formname="date_form">
- <div>
- <inputtype="button"value="添加附件(Add)"onclick="addFile('myfile')">
- </div>
- <divid="myfile">
- </div>
- </form>
- </body>
- </html>