主頁(yè) > 知識(shí)庫(kù) > asp.net 簡(jiǎn)便無刷新文件上傳系統(tǒng)

asp.net 簡(jiǎn)便無刷新文件上傳系統(tǒng)

熱門標(biāo)簽:銅川小型外呼系統(tǒng)運(yùn)營(yíng)商 廈門商鋪地圖標(biāo)注 浙江外呼系統(tǒng)怎么安裝 陜西人工外呼系統(tǒng)哪家好 上海楊浦怎么申請(qǐng)申請(qǐng)400電話 海外地圖標(biāo)注門市標(biāo) 云南外呼電銷機(jī)器人系統(tǒng) 地圖標(biāo)注多個(gè)行程 山西防封卡電銷卡套餐
ps:flash實(shí)現(xiàn)的效果是好得多,但這不是我研究的范圍,也沒什么可比性。

兼容:ie6/7/8, firefox 3.5.5, opera 10.01, safari 4.0.3, chrome 3.0
效果預(yù)覽
文件上傳
選擇文件 重命名 操作 狀態(tài)
重置 選擇文件
重置 選擇文件
重置 選擇文件

ps:由于需要后臺(tái),要測(cè)試系統(tǒng)請(qǐng)下載實(shí)例測(cè)試。
ps2:在完整實(shí)例文件中,還有一個(gè)文件屬性查看實(shí)例。

程序說明

【upload】

程序中最重要的方法就是upload了,調(diào)用它就可以進(jìn)行無刷新上傳。
upload的過程是這樣的,首先用stop方法停止上一次上傳,并判斷是否選擇文件。
然后分別調(diào)用_setIframe,_setForm和_setInput,生成需要的iframe,form和input。

如果設(shè)置了timeout屬性的話,會(huì)自動(dòng)設(shè)置計(jì)時(shí)器:
復(fù)制代碼 代碼如下:

if ( this.timeout > 0 ) {
this._timer = setTimeout( $$F.bind(this._timeout, this), this.timeout * 1000 );
}

ps:經(jīng)測(cè)試,小于0的延時(shí)時(shí)間,ie會(huì)取消執(zhí)行,而其他瀏覽器會(huì)當(dāng)成0執(zhí)行。

程序有一個(gè)_sending屬性用來判斷上傳狀態(tài)。
在stop(停止),dispose(銷毀),_finis(完成),_timeout(超時(shí))時(shí)會(huì)把它設(shè)為false。
而在上傳開始前要把它設(shè)置為true。

最后提交表單就開始上傳了。

【iframe】

程序使用_setIframe函數(shù)來創(chuàng)建無刷新需要的iframe。

由于ie中iframe的name不能修改的問題,要這樣創(chuàng)建iframe:
復(fù)制代碼 代碼如下:

var iframename = "QUICKUPLOAD_" + QuickUpload._counter++,
iframe = document.createElement( $$B.ie ? "iframe name=\"" + iframename + "\">" : "iframe");
iframe.name = iframename;
iframe.style.display = "none";

ps:關(guān)于iframe的name的問題參考這里的iframe部分。
ie8已經(jīng)可以修改name了,但在非標(biāo)準(zhǔn)(怪辟)模式下還是不能修改。
其中使用了一個(gè)QuickUpload函數(shù)自身的_counter屬性做計(jì)算器,這就能保證各個(gè)實(shí)例的iframe的name就不會(huì)重復(fù)。

為了能在文件上傳完成后執(zhí)行回調(diào)函數(shù),會(huì)在iframe的onload中執(zhí)行_finish函數(shù):
復(fù)制代碼 代碼如下:

var finish = this._fFINISH = $$F.bind(this._finish, this);
if ( $$B.ie ) {
iframe.attachEvent( "onload", finish );
} else {
iframe.onload = $$B.opera ? function(){ this.onload = finish; } : finish;
}

在ie需要用attachEvent來綁定onload,因?yàn)樵趇e中直接設(shè)置onload是無效的。
除了用attachEvent還可以用onreadystatechange代替。
至于原因我也不清楚,詳細(xì)參考“判斷 iframe 是否加載完成的完美方法”。

iframe的加載還有一個(gè)問題,測(cè)試以下代碼:

復(fù)制代碼 代碼如下:

body>div id="msg">狀態(tài):/div>/body>
script>
var msg = document.getElementById("msg");
var iframe = document.createElement("iframe");
iframe.onload = function(){ msg.innerHTML += "onload,"; }
document.body.appendChild(iframe);
iframe.src = "http://cloudgamer.cnblogs.com/"
/script>

結(jié)果safari, chrome都會(huì)觸發(fā)onload兩次,而opera, ff和ie(請(qǐng)自行兼容)都是1次。

估計(jì)在safari和chrome在appendChild之后就進(jìn)行第一次加載,并且在設(shè)置src之前加載完畢,所以觸發(fā)了兩次。
如果在插入body之前給iframe隨便設(shè)置一個(gè)src(除了空值),間接加長(zhǎng)第一次加載,那么也只觸發(fā)一次了。
ps:不設(shè)置或空值的src相當(dāng)于鏈接到“about:blank”(空白頁(yè))。

那么opera, ff和ie可能是第一次加載太慢,第二次覆蓋了第一次的,所以只觸發(fā)了一次onload。
ps:也可能是其他原因,例如瀏覽器優(yōu)化之類的,我也不確定。

針對(duì)加載過快的問題,可以在onload的時(shí)候根據(jù)_sending確定之前是否上傳狀態(tài)來解決。
雖然沒測(cè)試出來,會(huì)不會(huì)有_sending設(shè)置之后submit之前剛好觸發(fā)第一次onload的情況呢?
針對(duì)這個(gè)問題,在upload方法中會(huì)把_sending放在submit之后設(shè)置。
那如果在submit之后_sending設(shè)置之前就觸發(fā)了onload呢?(...囧)
這個(gè)情況基本不會(huì)出現(xiàn),如果真的出現(xiàn),就把_sending設(shè)置放到submit前面吧。

opera還有一個(gè)麻煩的問題,測(cè)試下面代碼:
復(fù)制代碼 代碼如下:

body>
div id="msg">狀態(tài):/div>
form action="http://cloudgamer.cnblogs.com/" target="ifr">
/form>
/body>
script>
var msg = document.getElementById("msg");
var iframe = document.createElement("iframe");
iframe.name = "ifr";
iframe.onload = function(){ msg.innerHTML += "onload,"; }
document.body.appendChild(iframe);
msg.innerHTML += "submit,";
document.forms[0].submit();
/script>

ie和ff顯示submit,onload,safari和chrome顯示的是onload,submit,onload,跟上面的分析一致。
而opera卻顯示submit,onload,onload,兩次onload都是在submit之后觸發(fā)的。
這個(gè)情況就不能單純用_sending來解決了。
是不是submit不能使iframe取消加載呢?
在appendChild之前設(shè)一個(gè)src,結(jié)果正常的只觸發(fā)onload一次,看來是可以的啊。

雖然不知道原因,辦法還是有的,一個(gè)是appendChild前設(shè)一個(gè)src,還可以在第一次onload中重新設(shè)置onload,像程序那樣。
但這兩個(gè)方法都存在不確定性,不能完全解決問題,但也找不到更好的方法了。

ff的onload還有一個(gè)問題,在出現(xiàn)ERROR_INTERNET_CONNECTION_RESET(文件大小超過服務(wù)器限制)之類的服務(wù)器錯(cuò)誤時(shí),即使加載完成也不會(huì)觸發(fā)onload,暫時(shí)找不到解決辦法。

iframe有一個(gè)缺陷是只能用onload判斷加載完成,但沒有辦法判斷是否加載成功。
沒有類似XMLHTTP的status的東西,遇上404之類的錯(cuò)誤也沒辦法判別出來。
在使用時(shí)要做好這方面的處理,例如說明允許上傳文件大小,超時(shí)時(shí)間,如何處理長(zhǎng)時(shí)間無響應(yīng)等。


【form】

程序使用_setForm函數(shù)來創(chuàng)建用來提交數(shù)據(jù)的form。

要實(shí)現(xiàn)無刷新上傳,要對(duì)form進(jìn)行特殊的處理:
復(fù)制代碼 代碼如下:

$$.extend(form, {
target: this._iframe.name, method: "post", encoding: "multipart/form-data"
});

ps:詳細(xì)看這里的無刷新上傳部分。

由于form是手動(dòng)插入的,為了不影響原來頁(yè)面布局還要設(shè)置一下form樣式,使它“隱形”起來:
復(fù)制代碼 代碼如下:

$$D.setStyle(form, {
padding: 0, margin: 0, border: 0,
backgroundColor: "transparent", display: "inline"
});

還要注意的是,同一個(gè)表單控件只能對(duì)應(yīng)一個(gè)form。
如果file控件本身已經(jīng)有一個(gè)form的話,必須在提交前移除:

file.form $$E.addEvent(file.form, "submit", $$F.bind(this.dispose, this));
dispose方法是用來銷毀程序的,包括移除form。
ps:如果提交前submit被覆蓋的話要手動(dòng)執(zhí)行一次dispose方法。

最后把form插入到dom:

file.parentNode.insertBefore(form, file).appendChild(file);
先把form插入到file控件之前,然后把file插入到form,這樣就能保證file在原來的位置上了。


【input】

如果有其他參數(shù)要傳遞,程序會(huì)使用_setInput函數(shù)來創(chuàng)建傳遞數(shù)據(jù)的表單控件。

由于生成的form里面只有file控件,要傳遞其他參數(shù)只能用程序生成了。
程序用一個(gè)_inputs集合來保存當(dāng)前在form中生成的表單控件。

首先根據(jù)自定義的parameter屬性創(chuàng)建表單控件:

復(fù)制代碼 代碼如下:

for ( name in this.parameter ) {
var input = form[name];
if ( !input ) {
input = document.createElement("input");
input.name = name; input.type = "hidden";
form.appendChild(input);
}
input.value = this.parameter[name];
newInputs[name] = input;
delete oldInputs[name];
}

當(dāng)form中沒有對(duì)應(yīng)name的控件時(shí),會(huì)自動(dòng)生成一個(gè)hidden控件插入到form中。
其中newInputs是用來記錄當(dāng)前生成的控件的,而oldInputs就是_inputs集合。
當(dāng)設(shè)置過對(duì)應(yīng)name的控件后,就從oldInputs中刪除對(duì)應(yīng)控件的關(guān)聯(lián)。

然后移除oldInputs關(guān)聯(lián)的控件:

for ( name in oldInputs ) { form.removeChild( oldInputs[name] ); }
這樣就能移除上一次生成的無用的控件了。

最后重新記錄當(dāng)前控件到_inputs方便下次使用。


【stop】

如果想停止當(dāng)前上傳操作,可以調(diào)用stop方法。

一般來說當(dāng)iframe發(fā)生重載時(shí),會(huì)取消上一次的載入,那么只要重新設(shè)置src就能取消上傳了。
測(cè)試以下代碼:

復(fù)制代碼 代碼如下:

body>
iframe id="ifr" name="ifr">/iframe>
form action="http://cloudgamer.cnblogs.com/" target="ifr">
/form>
/body>
script>
document.forms[0].submit();
document.getElementById("ifr").src = "";
/script>

結(jié)果都能取消加載,除了opera,未知什么原因。
有兩個(gè)方法解決,一個(gè)是通過form隨便用一個(gè)action提交一次,還有就是直接移除iframe。
后一個(gè)方法比較方便,程序中用_removeIframe方法直接移除iframe。
ps:有更好方法的話記得告訴我。


【dispose】

當(dāng)使用結(jié)束或其他原因要銷毀程序時(shí),可以調(diào)用dispose方法。

dispose里面主要做的是移除iframe和form。
移除iframe用的是_removeIframe方法,首先把onload移除,再把iframe從body移除:

var iframe = this._iframe;
$$B.ie ? iframe.detachEvent( "onload", this._fFINISH ) : ( iframe.onload = null );
document.body.removeChild(iframe); this._iframe = null;
十分簡(jiǎn)單,但在ff有一個(gè)問題,測(cè)試以下代碼:
復(fù)制代碼 代碼如下:

form target="ifr" action="x">
input id="btn" type="submit" value="click">
/form>
iframe name="ifr" id="ifr">/iframe>
script>
document.getElementById("btn").onclick = function(){
document.getElementById("ifr").onload = function(){
this.parentNode.removeChild(this);
};
}
/script>

提交后都能移除iframe,但ff還一直顯示“載入中”的狀態(tài)。
不過解決方法也很簡(jiǎn)單,用setTimeout設(shè)置一個(gè)延時(shí),讓iframe執(zhí)行完整就可以了。
所以在dispose中是這樣調(diào)用_removeIframe的:
復(fù)制代碼 代碼如下:

if ( $$B.firefox ) {
setTimeout($$F.bind(this._removeIframe, this), 0);
} else {
this._removeIframe();
}

至于form的移除就比較簡(jiǎn)單,在_removeForm這樣處理:
復(fù)制代碼 代碼如下:

var form = this._form, parent = form.parentNode;
if ( parent ) {
parent.insertBefore(this.file, form); parent.removeChild(form);
}
this._form = this._inputs = null;

要判斷一下parentNode,否則如果parentNode不存在的話后面的會(huì)執(zhí)行出錯(cuò)。

【file的reset】

在實(shí)例里,有一個(gè)用來重置file控件的ResetFile函數(shù)。

重置file控件一般的辦法是使所在的form執(zhí)行reset,但問題是會(huì)把其他表單控件也重置了。
以前由于安全問題,file的value是不允許修改的。
但現(xiàn)在ff,chrome和safari可以把它設(shè)為空值來實(shí)現(xiàn)重置:

file.value = "";
當(dāng)然其他值還是不允許的。
ps:記憶中以前是不行的,不知有沒有記錯(cuò)。

對(duì)于opera,有一個(gè)變通的方法,利用它的type屬性:

file.type = "text"; file.type = "file";
通過修改type得到的file控件,value會(huì)自動(dòng)還原成空值,這樣就間接把file控件清空了。
ps:利用這個(gè)方法可以間接得到文件路徑,但由于變回去后值就清空了,所以沒什么用。

而ie的表單控件的type設(shè)置后是不允許修改的,不能用opera的辦法。
不過還是有以下方法解決:
1,新建一個(gè)form,把file插進(jìn)入后reset,再移除:
復(fù)制代碼 代碼如下:

with(file.parentNode.insertBefore(document.createElement('form'), file)){
appendChild(file); reset(); removeNode(false);
}

好處是使用原生的reset,穩(wěn)定可靠,但效率低。
ps:removeNode只有ie和opera支持,如需兼容可改用removeChild的方式。

2,利用outerHTML,重建一個(gè)file控件:

file.outerHTML = file.outerHTML;
好處是高效,但由于是新創(chuàng)建的file控件,之前關(guān)聯(lián)的東西都丟失了。
ps:ff支持不支持outerHTML。

3,利用cloneNode,復(fù)制一個(gè)file控件:

file.parentNode.replaceChild(file.cloneNode(false), file);
跟上一個(gè)方法差不多,但效率更低。

4,利用select方法選中file控件的文本域,再進(jìn)行清空:

file.select(); document.selection.clear();


file.select(); document.selection.clear();
看來沒什么問題,但file必須能被select(不能是隱藏狀態(tài))。
ps:這兩個(gè)方法都只能在ie使用。

由于程序中file是需要關(guān)聯(lián)的,所以方法2和3都不能用。
方法4貌似也不錯(cuò),但有一個(gè)致命問題,在ie測(cè)試以下代碼:
復(fù)制代碼 代碼如下:

form>input id="test" name="file" type="file">/form>
script>
document.getElementById("test").onchange = function(){
this.select(); document.selection.clear();
this.form.submit();
}
/script>

執(zhí)行到submit會(huì)顯示“拒絕訪問”的錯(cuò)誤,原因不清楚,不知是ie故意的還是bug。

看來也只能使用方法1了:
復(fù)制代碼 代碼如下:

function ResetFile(file){
file.value = "";//ff chrome safari
if ( file.value ) {
if ( $$B.ie ) {//ie
with(file.parentNode.insertBefore(document.createElement('form'), file)){
appendChild(file); reset(); removeNode(false);
}
} else {//opera
file.type = "text"; file.type = "file";
}
}
}

ps:有更好方法的話記得告訴我啊。

這個(gè)函數(shù)并不夠通用,最好還是根據(jù)實(shí)際情況選擇需要的方法。

使用技巧

【上傳文件數(shù)】

在文件上傳實(shí)例中,各個(gè)文件是同時(shí)上傳的。
經(jīng)測(cè)試,瀏覽器能同時(shí)上傳的文件數(shù)如下:
ie 2
ff 8
opera 8
chrome 6
safari 6
由于ie最多同時(shí)只能傳2個(gè),所以設(shè)置更多文件也只能排隊(duì),而不能達(dá)到同時(shí)上傳的效果的。
ps:只是目測(cè)結(jié)果,有錯(cuò)請(qǐng)?zhí)岢觥?

【傳遞參數(shù)】

上傳文件實(shí)例中,可以傳遞對(duì)應(yīng)的修改文件名,在使用“一般上傳”多個(gè)文件一起上傳時(shí)也能找到對(duì)應(yīng)的文件名。
因?yàn)楸韱慰丶祩鬟f到后臺(tái)后,獲取數(shù)據(jù)的順序跟前臺(tái)表單控件的排列順序是一致的。
只要保證前臺(tái)file控件跟對(duì)應(yīng)表單控件的排列順序一致就能利用這個(gè)特性獲取對(duì)應(yīng)的值了。
詳細(xì)參考后臺(tái)代碼。

【回調(diào)函數(shù)】

有兩個(gè)方法可以響應(yīng)上傳完成回調(diào)函數(shù)。
一種是后臺(tái)上傳完成后,在iframe輸出并執(zhí)行回調(diào)函數(shù)或通過parent調(diào)用父窗口的回調(diào)函數(shù)。
這種比較方便,但必須在iframe里面執(zhí)行處理,例如文件屬性查看實(shí)例。
另一種是在iframe的onload中執(zhí)行回調(diào)函數(shù)。
好處是可以把所有處理放在父窗口,iframe可以不做任何處理或用來反饋信息。
缺點(diǎn)是有兼容性問題,而且會(huì)有加載后沒有觸發(fā)onload的情況(上面的iframe部分有說明)。
上傳文件實(shí)例中就是在onFinish中處理在iframe中輸出的數(shù)據(jù)。
由于可能出現(xiàn)一些意外情況導(dǎo)致響應(yīng)很久,甚至沒有響應(yīng),所以一定要設(shè)置timeout以防萬一。

【處理返回?cái)?shù)據(jù)】

上面提到,可以在onFinish中處理在iframe中輸出的數(shù)據(jù)。
要從iframe的body中獲取數(shù)據(jù),有以下幾個(gè)方法:
iframe.contentWindow.document.body.innerHTML
iframe.contentDocument.body.innerHTML
window.frames[iframename].document.body.innerHTML
其中前兩種差不多,后者比較簡(jiǎn)便,但ie不支持contentDocument,可惜。
第三種是利用frames對(duì)象來獲取,注意這樣獲取的對(duì)象直接就是window對(duì)象。
由于程序能直接獲得iframe對(duì)象,所以用的是第一種方式。
不過有一個(gè)問題在iframe的部分也提過,就是返回錯(cuò)誤信息頁(yè)面的問題。
在上傳文件實(shí)例中,在iframe中輸出的是json形式的文件信息數(shù)據(jù)。
在onFinish中是這樣處理的:
復(fù)制代碼 代碼如下:

try{
var info = eval("(" + iframe.contentWindow.document.body.innerHTML + ")");
show("上傳完成");
}catch(e){
show("上傳失敗"); stop(); return;
}

只有返回正確的json格式數(shù)據(jù)才能正常運(yùn)行,否則就拋出錯(cuò)誤,間接地排除了404等錯(cuò)誤信息。
ps:有更好方法的話歡迎提出。

【銷毀程序】

程序中有不少dom操作,在不需要繼續(xù)使用的時(shí)候最好執(zhí)行一次dispose方法來銷毀程序。
例如移除file之后,關(guān)閉窗口之前,提交表單之前,歷遍表單元素前等等。
既可以節(jié)省資源,防止dom的內(nèi)存泄漏,又能避免表單嵌套時(shí)的沖突問題。

【可用性】

看過“ppk談javascript”后,更加注重了可用性。
上傳實(shí)例在瀏覽器不支持js的情況下也能正常上傳,各位可以自行測(cè)試。

【編碼】

上一個(gè)無刷新上傳系統(tǒng),很多人反映上傳后文件名亂碼,后來發(fā)現(xiàn)是編碼的問題。
當(dāng)有中文信息傳遞時(shí),要注意前后臺(tái)的編碼必須統(tǒng)一,包括charset,文件編碼,web.config的配置等。

【asp版本】

asp版本跟.net版本功能是一樣的,使用無組件上傳類。
不過上傳類本身有一個(gè)缺陷導(dǎo)致提交同名file控件的話會(huì)出錯(cuò),經(jīng)過修改后現(xiàn)在可以正常使用了。


使用說明

實(shí)例化時(shí),第一個(gè)必要參數(shù)是file控件對(duì)象:

new QuickUpload(file);

第二個(gè)可選參數(shù)用來設(shè)置系統(tǒng)的默認(rèn)屬性,包括
屬性: 默認(rèn)值//說明
parameter: {},//參數(shù)對(duì)象
action: "",//設(shè)置action
timeout: 0,//設(shè)置超時(shí)(秒為單位)
onReady: function(){},//上傳準(zhǔn)備時(shí)執(zhí)行
onFinish: function(){},//上傳完成時(shí)執(zhí)行
onStop: function(){},//上傳停止時(shí)執(zhí)行
onTimeout: function(){}//上傳超時(shí)時(shí)執(zhí)行

還提供了以下方法:
upload:執(zhí)行上傳操作;
stop:停止上傳操作;
dispose:銷毀程序。


程序源碼
復(fù)制代碼 代碼如下:


var QuickUpload = function(file, options) {

this.file = $$(file);

this._sending = false;//是否正在上傳
this._timer = null;//定時(shí)器
this._iframe = null;//iframe對(duì)象
this._form = null;//form對(duì)象
this._inputs = {};//input對(duì)象
this._fFINISH = null;//完成執(zhí)行函數(shù)

$$.extend(this, this._setOptions(options));
};
QuickUpload._counter = 1;
QuickUpload.prototype = {
//設(shè)置默認(rèn)屬性
_setOptions: function(options) {
this.options = {//默認(rèn)值
action: "",//設(shè)置action
timeout: 0,//設(shè)置超時(shí)(秒為單位)
parameter: {},//參數(shù)對(duì)象
onReady: function(){},//上傳準(zhǔn)備時(shí)執(zhí)行
onFinish: function(){},//上傳完成時(shí)執(zhí)行
onStop: function(){},//上傳停止時(shí)執(zhí)行
onTimeout: function(){}//上傳超時(shí)時(shí)執(zhí)行
};
return $$.extend(this.options, options || {});
},
//上傳文件
upload: function() {
//停止上一次上傳
this.stop();
//沒有文件返回
if ( !this.file || !this.file.value ) return;
//可能在onReady中修改相關(guān)屬性所以放前面
this.onReady();
//設(shè)置iframe,form和表單控件
this._setIframe();
this._setForm();
this._setInput();
//設(shè)置超時(shí)
if ( this.timeout > 0 ) {
this._timer = setTimeout( $$F.bind(this._timeout, this), this.timeout * 1000 );
}
//開始上傳
this._form.submit();
this._sending = true;
},
//設(shè)置iframe
_setIframe: function() {
if ( !this._iframe ) {
//創(chuàng)建iframe
var iframename = "QUICKUPLOAD_" + QuickUpload._counter++,
iframe = document.createElement( $$B.ie ? "iframe name=\"" + iframename + "\">" : "iframe");
iframe.name = iframename;
iframe.style.display = "none";
//記錄完成程序方便移除
var finish = this._fFINISH = $$F.bind(this._finish, this);
//iframe加載完后執(zhí)行完成程序
if ( $$B.ie ) {
iframe.attachEvent( "onload", finish );
} else {
iframe.onload = $$B.opera ? function(){ this.onload = finish; } : finish;
}
//插入body
var body = document.body; body.insertBefore( iframe, body.childNodes[0] );

this._iframe = iframe;
}
},
//設(shè)置form
_setForm: function() {
if ( !this._form ) {
var form = document.createElement('form'), file = this.file;
//設(shè)置屬性
$$.extend(form, {
target: this._iframe.name, method: "post", encoding: "multipart/form-data"
});
//設(shè)置樣式
$$D.setStyle(form, {
padding: 0, margin: 0, border: 0,
backgroundColor: "transparent", display: "inline"
});
//提交前去掉form
file.form $$E.addEvent(file.form, "submit", $$F.bind(this.dispose, this));
//插入form
file.parentNode.insertBefore(form, file).appendChild(file);

this._form = form;
}
//action可能會(huì)修改
this._form.action = this.action;
},
//設(shè)置input
_setInput: function() {
var form = this._form, oldInputs = this._inputs, newInputs = {}, name;
//設(shè)置input
for ( name in this.parameter ) {
var input = form[name];
if ( !input ) {
//如果沒有對(duì)應(yīng)input新建一個(gè)
input = document.createElement("input");
input.name = name; input.type = "hidden";
form.appendChild(input);
}
input.value = this.parameter[name];
//記錄當(dāng)前input
newInputs[name] = input;
//刪除已有記錄
delete oldInputs[name];
}
//移除無用input
for ( name in oldInputs ) { form.removeChild( oldInputs[name] ); }
//保存當(dāng)前input
this._inputs = newInputs;
},
//停止上傳
stop: function() {
if ( this._sending ) {
this._sending = false;
clearTimeout(this._timer);
//重置iframe
if ( $$B.opera ) {//opera通過設(shè)置src會(huì)有問題
this._removeIframe();
} else {
this._iframe.src = "";
}
this.onStop();
}
},
//銷毀程序
dispose: function() {
this._sending = false;
clearTimeout(this._timer);
//清除iframe
if ( $$B.firefox ) {
setTimeout($$F.bind(this._removeIframe, this), 0);
} else {
this._removeIframe();
}
//清除form
this._removeForm();
//清除dom關(guān)聯(lián)
this._inputs = this._fFINISH = this.file = null;
},
//清除iframe
_removeIframe: function() {
if ( this._iframe ) {
var iframe = this._iframe;
$$B.ie ? iframe.detachEvent( "onload", this._fFINISH ) : ( iframe.onload = null );
document.body.removeChild(iframe); this._iframe = null;
}
},
//清除form
_removeForm: function() {
if ( this._form ) {
var form = this._form, parent = form.parentNode;
if ( parent ) {
parent.insertBefore(this.file, form); parent.removeChild(form);
}
this._form = this._inputs = null;
}
},
//超時(shí)函數(shù)
_timeout: function() {
if ( this._sending ) { this._sending = false; this.stop(); this.onTimeout(); }
},
//完成函數(shù)
_finish: function() {
if ( this._sending ) { this._sending = false; this.onFinish(this._iframe); }
}
}

完整實(shí)例下載
完整實(shí)例下載(asp版本)
相關(guān)應(yīng)用:JavaScript 圖片上傳預(yù)覽效果
轉(zhuǎn)載請(qǐng)注明出處:http://www.cnblogs.com/cloudgamer/
您可能感興趣的文章:

標(biāo)簽:孝感 自貢 朔州 信陽(yáng) 常州 許昌 萊蕪 西雙版納

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《asp.net 簡(jiǎn)便無刷新文件上傳系統(tǒng)》,本文關(guān)鍵詞  asp.net,簡(jiǎn)便,無,刷新,文件,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《asp.net 簡(jiǎn)便無刷新文件上傳系統(tǒng)》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于asp.net 簡(jiǎn)便無刷新文件上傳系統(tǒng)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章

    上一篇:ASP.NET中頁(yè)面之間傳遞值的幾種方式整理

    下一篇:Asp.net中Request.Url的各個(gè)屬性對(duì)應(yīng)的意義介紹