方案選擇:
查閱了一些資料，目前實現實現無刷新上傳主要有兩種方案，即利用隱藏的iframe來模擬無刷新上傳和利用xmlhttp分塊上傳文件。
這兩種方案中，利用隱藏的iframe來模擬無刷新上傳用的最爲普遍，實現起來也比較容易。而利用xmlhttp分塊上傳的方式，google
的結果顯示用的較少,特別是實用方面，而且代碼實現複雜。考慮到要同時實現類似Gmail的附件添加方式，最終選擇了利用隱藏的
iframe來模擬無刷新上傳的方案。
利用隱藏的iframe來模擬無刷新上傳的原理
利用隱藏的iframe來模擬無刷新上傳的原理比較簡單，在頁面中包含一個form和一個iframe，其中ifram設置爲不可見，同時將form
的target屬性設爲iframe的名字，這樣當上傳的時候，刷新的就是iframe中的頁面，而主頁面則不會有任何變化。可以在iframe中的
頁面中編寫上傳後客戶端要執行的javascript代碼，這樣可以輕鬆的實現對主頁面的操作。
類Gmail附件添加方式的實現
Gmail的附件添加方式有着比較好的用戶體驗，原本希望可以通過閱讀Gmail的代碼來了解Gmail的解決方案，但是發現這個想法有些
不靠譜。所以最終採用自己的方式來解決這個問題並實現了良好的瀏覽器兼容(IE和Firefox),對於Firefox,是通過利用javascript對DOM的操作，來動
態的創建和刪除文件選擇框.對於IE，則是結合Javascript,DOM,CSS來實現所要求的效果。在兩種瀏覽器下，均可以進一步擴展，來實現選擇後即自動
上傳的效果。
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <TITLE> New Document </TITLE>
- <META NAME="Generator" CONTENT="EditPlus">
- <META NAME="Author" CONTENT="">
- <META NAME="Keywords" CONTENT="">
- <META NAME="Description" CONTENT="">
- <script type="text/javascript">
- /*附件添加提示*/
- function getFirefoxTip(form)
- {
- var tipDiv=document.createElement("div");
- tipDiv.style.cssText="width:100px;font:12px Arial;color:#00f;text-decoration:underline";
- tipDiv.innerHTML="添加一個附件";
- tipDiv.οnclick=function()
- {
- var i=form.getAttribute("count")||0;
- createInput(form,parseInt(i)+1);
- };
- form.appendChild(tipDiv);
- }
- /*刪除已經添加的附件項*/
- function removeChild(parent,child)
- {
- var i=parent.getAttribute("count");
- parent.removeChild(child);
- i--;
- if(i==0)
- {
- parent.lastChild.innerHTML="添加一個附件";
- }
- parent.setAttribute("count",i);
- }
- /* 添加移除項*/
- function getRemove(form,node)
- {
- var span=document.createElement("span");
- span.style.cssText="font:10px Arial;color:#00f;text-decoration:underline;";
- span.innerHTML="移除";
- span.οnclick=function(){removeChild(form,node);}
- return span;
- }
- /*文件選擇框*/
- function createInput(form,inputIndex)
- {
- var i=inputIndex||0;
- if(i==0)
- {
- getFirefoxTip(form);;
- }
- else
- {
- var inputDiv=document.createElement("div");
- var input=document.createElement("input");
- input.setAttribute("type","file");
- input.setAttribute("name","file_"+i);
- inputDiv.appendChild(input);
- inputDiv.appendChild(getRemove(form,inputDiv));
- form.insertBefore(inputDiv,form.lastChild);
- form.setAttribute("count",i);
- form.lastChild.innerHTML="再添加一個附件";
- }
- }
- /*初始化*/
- function init()
- {
- createInput(document.forms['uploadForm']);
- }
- </script>
- </HEAD>
- <BODY οnlοad="init()">
- <form name="uploadForm" action="/upload.do" target="upload" enctype="multipart/form-data" method="post"></form>
- <iframe name="upload" style="display:none"></iframe>