1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE> New Document </TITLE>
5 <script type="text/javascript">
6 /************************
7 * author lijun
8 * date 2007.5.25
9 *
10 * 无刷新上传
11 * IE,Firefox下和Gmail类似的附件添加方式
12 * 允许进一步扩展，实现附件添加后即自动上传得功能。
13 * 2007.5.30修正了一个bug.
14 ************************/
15
16 /* 检测浏览器类型 */
17 function isIE()
18 {
19 if(document.attachEvent)
20 {
21 return true;
22 }
23 else
24 {
25 return false;
26 }
27 }
28
29 /*firefox下的附件添加提示*/
30 function getFirefoxTip(form)
31 {
32 var str="添加一个附件";
33 var cssStr="100px;font:12px Arial;color:#00f;text-decoration:underline";
34 var tipDiv=document.createElement("div");
35 tipDiv.style.cssText=cssStr;
36 tipDiv.innerHTML=str;
37 tipDiv.onclick=function()
38 {
39 var i=form.getAttribute("count")?form.getAttribute("count"):0;
40 createFirefoxInput(form,parseInt(i)+1);
41 };
42 return tipDiv;
43 }
44
45 /*删除已经添加的附件项*/
46 function removeChild(parent,child,tip)
47 {
48
49 var i=parent.getAttribute("count");
50 if(isIE())
51 {
52 var id=parseInt(child.getAttribute("id"));
53 parent.removeChild(child);
54 parent.removeChild(tip);
55 i--;
56 /*
57 var tipAry=new Array();
58 var inputAry=new Array();
59 for(j=0;j <parent.childNodes.length;j++)
60 {
61 var node=parent.childNodes[j];
62 if(node.nodeType==1)
63 {
64 if(node.getAttribute("idi"))
65 {
66 inputAry.push(node);
67 }
68 else if(node.getAttribute("idt"))
69 {
70 tipAry.push(node);
71 }
72 }
73 }
74 for(j=0;j <tipAry.length;j++)
75 {
76 var position=getPosition(tipAry[j]);
77 inputAry[j].style.top=position.top+"px";
78 inputAry[j].style.left=position.left+"px";
79 }
80 */
81 var tipAry=rePlaceInput(parent);
82 if(i==0)
83 {
84 tipAry[i].innerHTML="添加一个附件";
85 }
86 }
87 else
88 {
89 parent.removeChild(child);
90 i--;
91 if(i==0)
92 {
93 tip.innerHTML="添加一个附件";
94 }
95 }
96
97 parent.setAttribute("count",i);
98
99 }
100
101 /* 添加移除项 */
102 function getRemove(form,node,tip)
103 {
104 var text="移除";
105 var span=document.createElement("span");
106 span.style.cssText="font:10px Arial;color:#00f;text-decoration:underline;";
107 span.innerHTML=text;
108 span.onclick=function(){removeChild(form,node,tip);}
109 return span;
110 }
111
112 /* firefox下的文件选择框 */
113 function createFirefoxInput(form,inputIndex)
114 {
115 var i=inputIndex?inputIndex:0;
116 var tip=i==0?getFirefoxTip(form):form.lastChild;
117 if(i==0)
118 {
119 form.appendChild(tip);
120 }
121 else
122 {
123 var inputDiv=document.createElement("div");
124 var input=document.createElement("input");
125 input.setAttribute("type","file");
126 input.setAttribute("name","file_"+i);
127 input.onchange=function(){
128
129 }
130 inputDiv.appendChild(input);
131 inputDiv.appendChild(getRemove(form,inputDiv,tip));
132 form.insertBefore(inputDiv,tip);
133 form.setAttribute("count",i);
134 tip.innerHTML="再添加一个附件";
135 }
136
137 }
138
139 /* firefox下的初始化函数 */
140 function initFirefox()
141 {
142 var form=document.forms['uploadForm'];
143 createFirefoxInput(form);
144 }
145
146 /* 获取指定元素在页面的位置 */
147 function getPosition(obj)
148 {
149 var top=0,left=0;
150 while(obj.offsetParent)
151 {
152 top+=obj.offsetTop;
153 left+=obj.offsetLeft;
154 obj=obj.offsetParent;
155 }
156 return {top:top,left:left};
157 }
158
159 /* IE下的附件添加提示 */
160 function getIeTip(form)
161 {
162 var str=parseInt(form.getAttribute("count"))>=0?"再添加一个附件":"添加一个附件";
163 var cssStr="font:12px Arial;color:#00f;text-decoration:underline";
164 var tipDiv=document.createElement("div");
165 tipDiv.style.cssText=cssStr;
166 tipDiv.innerHTML=str;
167 return tipDiv;
168 }
169
170 /*IE下的文件按选择显示*/
171 function updateIeInput(input,tip)
172 {
173 var parent=input.parentNode;
174 parent.style.zIndex=-2;
175 tip.style.textDecoration="none";
176 tip.style.color="#000000";
177 tip.style.fontWeight="bold";
178 tip.innerHTML=input.value;
179 tip.appendChild(getRemove(input.form,parent,tip));
180 }
181
182 /*创建IE下的文件选择框*/
183 function createIeInput(form,inputIndex)
184 {
185 var i=inputIndex?inputIndex:0;
186 var tip=getIeTip(form);
187 tip.setAttribute("idt",i)
188 form.appendChild(tip);
189 var inputDiv=document.createElement("div");
190 var input=document.createElement("input");
191 input.setAttribute("type","file");
192 input.setAttribute("name","file_"+i);
193 input.style.cssText="0";
194 input.onchange=function(){
195 createIeInput(this.form,parseInt(this.form.getAttribute("count"))+1);
196 updateIeInput(this,tip);
197 rePlaceInput(this.form);
198 }
199 inputDiv.appendChild(input);
200 inputDiv.setAttribute("idi",i);
201 var position=getPosition(tip);
202 inputDiv.style.cssText="position:absolute;top:"+position.top+"px;left:"+position.left+"px;filter:alpha(opacity=0);z-index:2";
203 form.appendChild(inputDiv);
204 form.setAttribute("count",i);
205
206 }
207
208 /* 重新置位*/
209 function rePlaceInput(parent)
210 {
211 var tipAry=new Array();
212 var inputAry=new Array();
213 for(j=0;j <parent.childNodes.length;j++)
214 {
215 var node=parent.childNodes[j];
216 if(node.nodeType==1)
217 {
218 if(node.getAttribute("idi"))
219 {
220 inputAry.push(node);
221 }
222 else if(node.getAttribute("idt"))
223 {
224 tipAry.push(node);
225 }
226 }
227 }
228 for(j=0;j <tipAry.length;j++)
229 {
230 var position=getPosition(tipAry[j]);
231 inputAry[j].style.top=position.top+"px";
232 inputAry[j].style.left=position.left+"px";
233 }
234 return tipAry;
235 }
236
237 /*初始化IE*/
238 function initIE()
239 {
240 var form=document.forms["uploadForm"];
241 createIeInput(form);
242 window.onresize=function(){
243 rePlaceInput(form);
244 }
245 }
246
247 /* 初始化 */
248 function init()
249 {
250 if(isIE())
251 {
252 initIE();
253 }
254 else
255 {
256 initFirefox();
257 }
258 }
259 </script>
260 </HEAD>
261
262 <BODY onload="init()">
263 <form name="uploadForm" action="/upload.do" target="upload" enctype="multipart/form-data" method="post">
264 </form>
265 <iframe name="upload" style="display:none"> </iframe>
266 </BODY> </HTML>