轉自: http://www.cnblogs.com/cloudgamer/archive/2008/11/28/1314766.html?
本文僅供個人參考資料用，如果您搜索到此博文，請查看原文鏈接。
效果預覽:
這里的預覽只是前臺的效果，要整個系統測試請下載完整實例。
程序說明
【無刷新上傳】
要實現文件上傳，form必須設置幾個屬性：
1.action：設為要處理數據的頁面地址；
2.method：設為"post"；
3.enctype/encoding：必須設為"multipart/form-data"，這里要注意的是在ie中用js修改form的enctype屬性是沒有效果的，只能修改encoding；
后面兩個屬性程序初始化時都有設置：
this.Form.method = "post";
this.Form.encoding = "multipart/form-data";
要注意這里的無刷新不是ajax哦，而是利用“古老”的iframe。
由于ajax提交數據必須先獲取數據，而js（一般情況下）是不能操作客戶端文件，要獲取文件數據就更不用說了，所以只能用iframe來做。
先說說iframe實現無刷新上傳的原理：利用form的target屬性，把數據提交到頁面中一個（通常為隱藏的）iframe上。直觀點說就是把“刷新”留給iframe。
其實原理跟一般用iframe實現無刷新提交表單是一樣的，只是這里換成是文件。
這里關鍵就是把form的target設為iframe的name：
this.Form.target = this._FrameName;
【iframe】
如果沒有自定義iframe，程序在初始化時會自動創建無刷新所需的iframe的。
首先必須選擇一個iframe名，這在無刷新時是必須的，為了每個實例能創建各自的iframe，這里用了一個隨機數：
this._FrameName = "uploadFrame_" + Math.floor(Math.random() * 1000);
也可以用一個遞增的計算器來代替隨機數。
接著創建iframe，本以為用document.createElement("iframe")創建再設置它的name屬性就行了。
卻發現這樣設置的name在ie居然不認（有說name是只讀屬性），還好在網上找到一個方法：“IE 創建元素，還有一個特點，就是可以連同屬性一同創建”。
例如我想給動態創建的iframe設置name，可以這樣：
document.createElement("<iframe name=\"" + this._FrameName + "\">")
不過這個方式在ff會報錯：
uncaught exception: String contains an invalid character (NS_ERROR_DOM_INVALID_CHARACTER_ERR)
估計是用createElement時不能帶name，標準應該也是這樣，所以兼容的方式這樣寫：
Code
var oFrame = isIE ? document.createElement("<iframe name=\"" + this._FrameName + "\">") : document.createElement("iframe");
//為ff設置name
oFrame.name = this._FrameName;
oFrame.style.display = "none";關于這方面更詳細的內容請看這里。
創建完還需要插入到body中，一般的做法是使用document.body.appendChild，但在ie中會有“已終止操作”錯誤，可以用下面這段代碼測試：
Code
<body>
<div>
<script>
document.body.appendChild(document.createElement("div"));
</script>
</div>
</body>
網上找到一個解析：“原來FF下的實現機制是當頁面還沒有完全讀取完時body元素就已經存在了，而IE只有頁面完全讀取結束body元素才會存在，所以在頁面中插入上面這條語句在IE下就會出現錯誤”。
我在web開發未解之謎中也提到了這個現象，我這里使用了insertBefore代替：
document.body.insertBefore(oFrame, document.body.childNodes[0]);
在服務器端文件傳送完（或失敗）之后，怎么通知客戶端呢？
這里說說我的方法，首先我在客戶端定義一個函數：
function Finish(msg){ alert(msg); location.href = location.href; }
很簡單，就是顯示提示并重新加載頁面（如果使用reload會導致ff中iframe重復加載數據）。
那服務器端如何通知客戶端的問題，就是iframe如何跟主頁面交互。
答案是通過window.parent或window.top，在iframe中parent和top屬性“分別返回立即父窗口和最上層的祖先窗口”。
例如我在服務器端處理完數據之后會輸出：
context.Response.Write("<script>window.parent.Finish('" + _msg + "');</script>");
就會執行主頁面的Finish函數了。
【多文件上傳】
對于多文件上傳，這里的目的是如何做到163網盤那樣，只用一個file控件就實現多文件上傳。
這里參考了163網盤的思路，下面說說如何實現：
首先必須有一個文件空間（我自己定的名字），例如程序中的"idFile"對象，這個空間不需要內容甚至一個div就可以，主要是用來存放file控件，程序中Folder屬性就是這個文件空間對象。
ps：這里的要求是把file控件都控制在文件空間里，即使不是單file控件的情況。
再說說Files屬性，這個屬性放的是file控件集合，方便獲取file控件，在下面“文件列表”就會用到。
處理這些file控件的程序主要在Ini函數中：
首先是處理文件空間中的file控件：
Code
this.Files = [];
//整理文件空間，把有值的file放入文件集合
Each(this.Folder.getElementsByTagName("input"), Bind(this, function(o){
if(o.type == "file"){ o.value && this.Files.push(o); this.onIniFile(o); }
}))
可以看到這里主要是把file控件放入到Files中，并執行附加函數onIniFile，我是這樣定義這個函數的：
onIniFile: function(file){ file.value ? file.style.display = "none" : this.Folder.removeChild(file); }
這里為了實現單file控件，把原來有值的file都隱藏了，還有那個“單file控件”呢？
別急，接著就在文件空間插入一個新的file控件：
Code
var file = document.createElement("input");
file.name = this.FileName; file.type = "file"; file.onchange = Bind(this, function(){ this.Check(file); this.Ini(); });
this.Folder.appendChild(file);
可以看到file控件的name是FileName屬性的值，默認是空的，如果服務器端需要這個name的話就可以設置。
這里可以看到每個file控件都有onchange來執行檢測函數Check，這樣每次選擇文件后都會用Check檢測一次，這里說說這個Check函數：
Code
//檢測變量
var bCheck = true;
//進行空值、文件數、后綴名、同值檢測
if(!file.value){
bCheck = false; this.onEmpty();
} else if(this.Limit && this.Files.length >= this.Limit){
bCheck = false; this.onLimite();
} else if(!!this.ExtIn.length && !RegExp("\.(" + this.ExtIn.join("|") + ")$", "i").test(file.value)){
//檢測是否允許后綴名
bCheck = false; this.onNotExtIn();
} else if(!!this.ExtOut.length && RegExp("\.(" + this.ExtOut.join("|") + ")$", "i").test(file.value)) {
//檢測是否禁止后綴名
bCheck = false; this.onExtOut();
} else if(!!this.Distinct) {
Each(this.Files, function(o){ if(o.value == file.value){ bCheck = false; } })
if(!bCheck){ this.onSame(); }
}
里面有一個檢測變量bCheck，然后進行空值、文件數限制、后綴名、相同文件的檢測，當其中一個步驟不通過bCheck就會設為false，一個常用的檢測結構。
這里說說檢測后綴名，由于js不能像后臺那樣獲取文件的文件類型，所以只能根據后綴名來判斷，例如用正則判斷：
/\.(jpg|gif)$/i.test(file.value)
這樣判斷顯然是不夠的，所以如果要做文件類型判斷的話一定要在后臺用ContentType再判斷一次。
最后如果沒有通過檢測就會執行onFail函數：
!bCheck && this.onFail(file);
我在onFail函數中設定了移除沒有通過檢測的file控件：
onFail: function(file){ this.Folder.removeChild(file); }
這樣就基本實現（正確的說是模擬）了單file控件上傳多個文件的效果了。
【文件列表】
在上面的Ini函數中，最后執行了一個附加函數onIni，這個函數是用戶自己定義的，我就在這個函數中添加文件列表。
在之前先說說添加文件列表的函數AddList，這個函數是用來把file控件的值列在一個table里面。
函數的參數是一個二維數組，其中第一維是行（tr）,第二維是列（td）。
首先獲取列表對象FileList，再定義一個文檔碎片oFragment來操作dom：
var FileList = $("idFileList"), oFragment = document.createDocumentFragment();
然后用兩個Each把二維數組插入到文檔碎片中：
Code
Each(rows, function(cells){
var row = document.createElement("tr");
Each(cells, function(o){
var cell = document.createElement("td");
if(typeof o == "string"){ cell.innerHTML = o; }else{ cell.appendChild(o); }
row.appendChild(cell);
});
oFragment.appendChild(row);
})
其中用了一個判斷if(typeof o == "string")，如果是文本就直接用innerHTML插入td，如果不是文本（這里不是文本就是一個對象）就用appendChild插入到td。
當數據都插入到文檔碎片，就準備把文檔碎片插入到FileList中，不過還有一個步驟就是清空FileList中原有的數據。
本來把innerHTML設為空來清空FileList會更有效率，但ie的table中只有td支持innerHTML，所以只好用removeChild來清空：
while(FileList.hasChildNodes()){ FileList.removeChild(FileList.firstChild); }
之后就可以把文檔碎片插入了：
FileList.appendChild(oFragment);
繼續看onIni函數，現在只需要把要顯示的數據組成一個二維數組，再用AddList就能顯示文件列表了，這時存放file控件集合的Files屬性就大有用處了。
首先定義一個放顯示數據的數組：
var arrRows = [];
然后根據Files對這個數組賦值：
Code
if(this.Files.length){
var oThis = this;
Each(this.Files, function(o){
var a = document.createElement("a"); a.innerHTML = "取消"; a.href = "javascript:void(0);";
a.onclick = function(){ oThis.Delete(o); return false; };
arrRows.push([o.value, a]);
});
} else { arrRows.push(["<font color='gray'>沒有添加文件</font>", " "]); }
AddRow(arrRows);
當Files沒有控件時只是輸出“沒有添加文件”，有控件時就會把每個file控件的要顯示數據放到一個數組中，可以看到這個數組其實就是td內容的集合，接著把這個數組加入到arrRows中形成二維數組，最后把得到的arrRows給AddRow函數顯示數據就行了。
為了能取消指定的file控件，這里插入了一個a來觸發刪除函數Delete，這里也有一個技巧，這里把href設為"javascript:void(0);"，并在onclick中返回false，這樣能最大程度的實現僅僅執行js而不去跳轉。
在表單提交時也要重新顯示文件列表，表單提交后就不允許刪除文件了，只顯示文件路徑就行了：
Code
$("idBtnupload").onclick = function(){
//顯示文件列表
var arrRows = [];
Each(fu.Files, function(o){ arrRows.push([o.value, " "]); });
AddList(arrRows);
fu.Folder.style.display = "none";
$("idProcess").style.display = "";
$("idMsg").innerHTML = "正在添加文件到您的網盤中，請稍候……<br />有可能因為網絡問題，出現程序長時間無響應，請點擊“<a href='?'><font color='red'>取消</font></a>”重新上傳文件";
fu.Form.submit();
}
說到表單提交要注意一個問題，就是表單是不能嵌套的，最好是把表單放到服務器表單之外，沒有辦法才使用服務器表單作為提交表單（由于程序會修改提交表單的屬性，所以盡量不要這樣使用）。
這樣文件列表就完成了，有興趣的話也可以自己封裝一下這個功能。
【file樣式】
到此，程序的功能都已經實現了，但在163網盤中還有一個特別的地方，就是file控件的樣式。
如果有用過163網盤上傳文件，就知道那個file控件就像一個按鈕，但功能確實是一個file控件。
但當自己嘗試修改file控件的樣式時，發現單單設置file控件的樣式并不能實現想要的效果。
于是我想了另一個辦法，用一個button來模擬，結果發現也不行，用js根本操作不了file控件，應該是考慮到安全問題吧。
最后是參考了163網盤和muxrwc模擬126附件添加的效果，總結了這個方法：
1.指定用一個容器（例如程序中的idFile）。
容器最好指定高和寬，并且overflow為hidden，不是塊級元素的最好設display為block（為了高和寬的正確呈現）；
2.在容器里放一個file控件，并設置樣式，使能觸發彈出選擇文件框的部分覆蓋整個容器，并設置成全透明。
容器指定準確的高和寬就是為了能通過file控件中不多的能設置的樣式來覆蓋整個容器；
3.現在已經把容器模擬成file控件了，可以直接設置容器的樣式來模擬設置file控件的樣式了。
在程序中主要用file控件的margin-left和font-size來實現覆蓋整個容器：
Code
a.files input {
margin-left:-350px;
font-size:30px;
cursor:pointer;
filter:alpha(opacity=0);
opacity:0;
}
至于容器，我使用了有偽類hover的a元素（雖然CSS2中hover可以應用于任何對象，但ie6不支持）。
這里用了一個常用的小技巧，就是用一張圖片作為背景通過在hover時修改background-position來實現兩張圖片的效果：
Code
a.files {
width:90px;
height:30px;
overflow:hidden;
display:block;
border:1px solid #BEBEBE;
background:url(img/fu_btn.gif) left top no-repeat;
text-decoration:none;
}
a.files:hover {
background-color:#FFFFEE;
background-position:0 -30px;
}
在點擊這個a時后會出現一個虛線框，在這里顯然不太美觀，可以把outline設為none來去掉，可是ie又不支持，在網上找到一個方法ie可以把hideFocus設為true來隱藏聚焦（即不顯示這個虛線框，hideFocus可以在js或html中設置，也可以通過expression放到css中：
Code
a.files, a.files input {
outline:none;/*ff* /
hide-focus:expression(this.hideFocus=true);/*ie* /
}
這樣完全模擬了163網盤的效果了。
【后臺】
前臺基本完成了，就到后臺啦。后臺的功能很簡單，就是處理傳遞過來的文件數據。
這里像js + .Net 圖片切割系統那樣使用ashx文件處理IHttpHandler發送過來的數據。
程序很簡單，就直接貼代碼了：
Code
int iTotal = context.Request.Files.Count;
if (iTotal == 0)
{
_msg = "沒有數據";
}
else
{
int iCount = 0;
for (int i = 0; i < iTotal; i++)
{
HttpPostedFile file = context.Request.Files[i];
if (file.ContentLength > 0 || !string.IsNullOrEmpty(file.FileName))
{
//保存文件
file.SaveAs(System.Web.HttpContext.Current.Server.MapPath("./file/" + Path.GetFileName(file.FileName)));
//這里可以根據實際設置其他限制
if (++iCount > UploadFileLimit)
{
_msg = "超過上傳限制：" + UploadFileLimit;
break;
}
}
}
}
這里只檢測了有無文件和文件數限制，其他檢測如文件大小等可以自己擴展，應該不難。
處理完數據之后就通知客戶端：
context.Response.Write("<script>window.parent.Finish('" + _msg + "');</script>");
這個在上面iframe的內容中已經說明了。
使用說明
基本使用很簡單，實例化一個file對象，其中參數分別是form對象，文件空間對象：
new FileUpload("uploadForm", "idFile")
這樣就實現了一個簡單的無刷新上傳文件表單。
還可以使用這幾個屬性：
Form//表單
Folder//文件控件存放空間
Files//文件集合
更多的功能可以選擇設置這些屬性：
屬性名:默認值//說明
FileName:"",//文件上傳控件的name，配合后臺使用
FrameName:"",//iframe的name，要自定義iframe的話這里設置name
onIniFile:function(){},//整理文件時執行(其中參數是file對象)
onEmpty:function(){},//文件空值時執行
Limit:0,//文件數限制，0為不限制
onLimite:function(){},//超過文件數限制時執行
Distinct:true,//是否不允許相同文件
onSame:function(){},//有相同文件時執行
ExtIn:[],//允許后綴名
onNotExtIn:function(){},//不是允許后綴名時執行
ExtOut:[],//禁止后綴名，當設置了ExtIn則ExtOut無效
onExtOut:function(){},//是禁止后綴名時執行
onFail:function(){},//文件不通過檢測時執行(其中參數是file對象)
onIni:function(){}//重置時執行
使用方法可以參考實例。
程序中提供了下面幾個方法：
Ini 整理空間
Check 檢測file對象
Delete 刪除指定file
Clear 刪除全部file
完整程序
樣式設置
Code
.fu_list {
width:600px;
background:#ebebeb;
font-size:12px;
}
.fu_list td {
padding:5px;
line-height:20px;
background-color:#fff;
}
.fu_list table {
width:100%;
border:1px solid #ebebeb;
}
.fu_list thead td {
background-color:#f4f4f4;
}
.fu_list b {
font-size:14px;
}
/*file容器樣式*/
a.files {
width:90px;
height:30px;
overflow:hidden;
display:block;
border:1px solid #BEBEBE;
background:url(img/fu_btn.gif) left top no-repeat;
text-decoration:none;
}
a.files:hover {
background-color:#FFFFEE;
background-position:0 -30px;
}
/*file設為透明，并覆蓋整個觸發面*/
a.files input {
margin-left:-350px;
font-size:30px;
cursor:pointer;
filter:alpha(opacity=0);
opacity:0;
}
/*取消點擊時的虛線框*/
a.files, a.files input {
outline:none;/*ff*/
hide-focus:expression(this.hideFocus=true);/*ie*/
}
html代碼
Code
<form id="uploadForm" action="File.ashx">
<table border="0" cellspacing="1" class="fu_list">
<thead>
<tr>
<td colspan="2"><b>上傳文件</b></td>
</tr>
</thead>
<tbody>
<tr>
<td align="right" width="15%" style="line-height:35px;">添加文件：</td>
<td><a href="javascript:void(0);" class="files" id="idFile"></a> <img id="idProcess" style="display:none;" src="img/loading.gif" /></td>
</tr>
<tr>
<td colspan="2"><table border="0" cellspacing="0">
<thead>
<tr>
<td>文件路徑</td>
<td width="100"></td>
</tr>
</thead>
<tbody id="idFileList">
</tbody>
</table></td>
</tr>
<tr>
<td colspan="2" style="color:gray">溫馨提示：最多可同時上傳 <b id="idLimit"></b> 個文件，只允許上傳 <b id="idExt"></b> 文件。 </td>
</tr>
<tr>
<td colspan="2" align="center" id="idMsg"><input type="button" value="開始上傳" id="idBtnupload" disabled="disabled" />
<input type="button" value="全部取消" id="idBtndel" disabled="disabled" />
</td>
</tr>
</tbody>
</table>
</form>
程序代碼
Code
var isIE = (document.all) ? true : false;
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
var Each = function(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
//
var FileUpload = Class.create();
FileUpload.prototype = {
//表單對象，文件控件存放空間
initialize: function(form, folder, options) {
this.Form = $(form);//表單
this.Folder = $(folder);//文件控件存放空間
this.Files = [];//文件集合
this.SetOptions(options);
this.FileName = this.options.FileName;
this._FrameName = this.options.FrameName;
this.Limit = this.options.Limit;
this.Distinct = !!this.options.Distinct;
this.ExtIn = this.options.ExtIn;
this.ExtOut = this.options.ExtOut;
this.onIniFile = this.options.onIniFile;
this.onEmpty = this.options.onEmpty;
this.onNotExtIn = this.options.onNotExtIn;
this.onExtOut = this.options.onExtOut;
this.onLimite = this.options.onLimite;
this.onSame = this.options.onSame;
this.onFail = this.options.onFail;
this.onIni = this.options.onIni;
if(!this._FrameName){
//為每個實例創建不同的iframe
this._FrameName = "uploadFrame_" + Math.floor(Math.random() * 1000);
//ie不能修改iframe的name
var oFrame = isIE ? document.createElement("<iframe name=\"" + this._FrameName + "\">") : document.createElement("iframe");
//為ff設置name
oFrame.name = this._FrameName;
oFrame.style.display = "none";
//在ie文檔未加載完用appendChild會報錯
document.body.insertBefore(oFrame, document.body.childNodes[0]);
}
//設置form屬性，關鍵是target要指向iframe
this.Form.target = this._FrameName;
this.Form.method = "post";
//注意ie的form沒有enctype屬性，要用encoding
this.Form.encoding = "multipart/form-data";
//整理一次
this.Ini();
},
//設置默認屬性
SetOptions: function(options) {
this.options = {//默認值
FileName: "",//文件上傳控件的name，配合后臺使用
FrameName: "",//iframe的name，要自定義iframe的話這里設置name
onIniFile: function(){},//整理文件時執行(其中參數是file對象)
onEmpty: function(){},//文件空值時執行
Limit: 0,//文件數限制，0為不限制
onLimite: function(){},//超過文件數限制時執行
Distinct: true,//是否不允許相同文件
onSame: function(){},//有相同文件時執行
ExtIn: [],//允許后綴名
onNotExtIn: function(){},//不是允許后綴名時執行
ExtOut: [],//禁止后綴名，當設置了ExtIn則ExtOut無效
onExtOut: function(){},//是禁止后綴名時執行
onFail: function(){},//文件不通過檢測時執行(其中參數是file對象)
onIni: function(){}//重置時執行
};
Extend(this.options, options || {});
},
//整理空間
Ini: function() {
//整理文件集合
this.Files = [];
//整理文件空間，把有值的file放入文件集合
Each(this.Folder.getElementsByTagName("input"), Bind(this, function(o){
if(o.type == "file"){ o.value && this.Files.push(o); this.onIniFile(o); }
}))
//插入一個新的file
var file = document.createElement("input");
file.name = this.FileName; file.type = "file"; file.onchange = Bind(this, function(){ this.Check(file); this.Ini(); });
this.Folder.appendChild(file);
//執行附加程序
this.onIni();
},
//檢測file對象
Check: function(file) {
//檢測變量
var bCheck = true;
//空值、文件數限制、后綴名、相同文件檢測
if(!file.value){
bCheck = false; this.onEmpty();
} else if(this.Limit && this.Files.length >= this.Limit){
bCheck = false; this.onLimite();
} else if(!!this.ExtIn.length && !RegExp("\.(" + this.ExtIn.join("|") + ")$", "i").test(file.value)){
//檢測是否允許后綴名
bCheck = false; this.onNotExtIn();
} else if(!!this.ExtOut.length && RegExp("\.(" + this.ExtOut.join("|") + ")$", "i").test(file.value)) {
//檢測是否禁止后綴名
bCheck = false; this.onExtOut();
} else if(!!this.Distinct) {
Each(this.Files, function(o){ if(o.value == file.value){ bCheck = false; } })
if(!bCheck){ this.onSame(); }
}
//沒有通過檢測
!bCheck && this.onFail(file);
},
//刪除指定file
Delete: function(file) {
//移除指定file
this.Folder.removeChild(file); this.Ini();
},
//刪除全部file
Clear: function() {
//清空文件空間
Each(this.Files, Bind(this, function(o){ this.Folder.removeChild(o); })); this.Ini();
}
}
測試代碼
Code
var fu = new FileUpload("uploadForm", "idFile", { Limit: 3, ExtIn: ["jpg", "gif"],
onIniFile: function(file){ file.value ? file.style.display = "none" : this.Folder.removeChild(file); },
onEmpty: function(){ alert("請選擇一個文件"); },
onLimite: function(){ alert("超過上傳限制"); },
onSame: function(){ alert("已經有相同文件"); },
onNotExtIn: function(){ alert("只允許上傳" + this.ExtIn.join("，") + "文件"); },
onFail: function(file){ this.Folder.removeChild(file); },
onIni: function(){
//顯示文件列表
var arrRows = [];
if(this.Files.length){
var oThis = this;
Each(this.Files, function(o){
var a = document.createElement("a"); a.innerHTML = "取消"; a.href = "javascript:void(0);";
a.onclick = function(){ oThis.Delete(o); return false; };
arrRows.push([o.value, a]);
});
} else { arrRows.push(["<font color='gray'>沒有添加文件</font>", " "]); }
AddList(arrRows);
//設置按鈕
$("idBtnupload").disabled = $("idBtndel").disabled = this.Files.length <= 0;
}
});
$("idBtnupload").onclick = function(){
//顯示文件列表
var arrRows = [];
Each(fu.Files, function(o){ arrRows.push([o.value, " "]); });
AddList(arrRows);
fu.Folder.style.display = "none";
$("idProcess").style.display = "";
$("idMsg").innerHTML = "正在添加文件到您的網盤中，請稍候……<br />有可能因為網絡問題，出現程序長時間無響應，請點擊“<a href='?'><font color='red'>取消</font></a>”重新上傳文件";
fu.Form.submit();
}
//用來添加文件列表的函數
function AddList(rows){
//根據數組來添加列表
var FileList = $("idFileList"), oFragment = document.createDocumentFragment();
//用文檔碎片保存列表
Each(rows, function(cells){
var row = document.createElement("tr");
Each(cells, function(o){
var cell = document.createElement("td");
if(typeof o == "string"){ cell.innerHTML = o; }else{ cell.appendChild(o); }
row.appendChild(cell);
});
oFragment.appendChild(row);
})
//ie的table不支持innerHTML所以這樣清空table
while(FileList.hasChildNodes()){ FileList.removeChild(FileList.firstChild); }
FileList.appendChild(oFragment);
}
$("idLimit").innerHTML = fu.Limit;
$("idExt").innerHTML = fu.ExtIn.join("，");
$("idBtndel").onclick = function(){ fu.Clear(); }
//在后臺通過window.parent來訪問主頁面的函數
function Finish(msg){ alert(msg); location.href = location.href; }
【asp版本補充】
由于很多人問我asp版本的后臺該如何寫，所以決定寫一個給大家。
這里我用了化境HTTP上傳程序2.1版（應該是最新版了）的無組件上傳類，但用的時候發現幾個問題（不知是我不會用還是asp本身的問題）：
1，當file控件的name是空時，后臺會找不到文件；
2，文件名比較短時（例如我用"f"），后臺也找不到文件；
3，當有多個file控件，如果使用相同的name，后臺只會保存一個文件；
4，我在上傳文件后輸出的中文是亂碼（有時又正常）。
針對前3條，我加了一個RanName屬性，設為true的話會自動生成隨機的file控件名，對于第4條，我發現如果字是直接寫在文檔上就不會亂碼，所以我這里把輸出的文字都直接寫在文檔上沒有用變量。如果有兄弟知道怎么解決這些問題記得告訴我哦。
精華的評論:
回復 引用 查看 2008-10-20 09:21 | 夢在天涯
ding!
回復 引用 查看 2008-10-20 09:22 | Selfocus
我來占個沙發，坐到慢慢看！
回復 引用 2008-10-20 09:33 | mr.s [未注冊用戶]
不錯啊，iframe確實是好東西，我以前也用它做過一些無刷新的效果。
不過現在有些瀏覽器或用戶怕iframe中藏有病毒，禁用了iframe那怎么辦啊。
回復 引用 查看 2008-10-20 10:31 | cloudgamer
@mr.s
@Selfocus
謝謝支持
回復 引用 查看 2008-10-20 10:33 | cloudgamer
@mr.s
iframe應用很多，一般不會禁的吧，如果怕禁了就不用無刷新咯
代碼中插了個form導致剛才評論提交不了!-_-
回復 引用 查看 2008-10-20 10:50 | jww
JS代碼看著很舒服，向lz學習！
回復 引用 查看 2008-10-20 10:54 | 沛沛
當上傳時,點取消,不應該讓整個頁面刷新嘛
這樣會導致頁面中其他表單中的未提交數據丟失
回復 引用 查看 2008-10-20 10:56 | Airker
下載了！回去看看 學習學習！
回復 引用 查看 2008-10-20 10:58 | cloudgamer
@沛沛
這個是程序中自己設置的，并不是規定的，完全可以去掉。
@jww
@Airker
謝謝支持
回復 引用 查看 2008-10-20 10:58 | 一線風
記一下~
回復 引用 查看 2008-10-20 11:03 | fkeuem
真的很不錯。謝謝。
回復 引用 查看 2008-10-20 11:20 | PuserChen
下載了，學習下! 多謝摟主
回復 引用 查看 2008-10-20 11:23 | guojing
為什么不使用AJAX+上傳控件呢 也可以實現無刷新
回復 引用 查看 2008-10-20 11:44 | cloudgamer
@一線風
@fkeuem
@PuserChen
謝謝支持
@guojing
AJAX+上傳控件其實也是相同的原理
你也可以用啊，我這里沒有討厭控件的意思啊
這里只是教大家怎么自己動手做這個功能
回復 引用 查看 2008-10-20 13:07 | 吳畏
我是新手，對下面代碼有些不解
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
var FileUpload = Class.create();
FileUpload.prototype = {
//表單對象，文件控件存放空間
initialize: function(form, folder, options) {}}
Class.create() return的是一個Function對象，為什么網上的資料說Class.create()的是一個類，到底javascript里面的類是什么樣的概念，望解答，謝謝
回復 引用 查看 2008-10-20 13:47 | cloudgamer
@吳畏
js的類其實就是Function對象
因為js沒有真正的類，只是用Function對象模擬的
回復 引用 查看 2008-10-20 13:56 | 王國金
謝謝樓主的無限!
下過來，可以用在項目中。呵呵。
回復 引用 查看 2008-10-20 14:33 | 克隆
不錯，記號！
回復 引用 查看 2008-10-20 14:38 | Charles Chen
--引用--------------------------------------------------
guojing: 為什么不使用AJAX+上傳控件呢 也可以實現無刷新
--------------------------------------------------------
asp.net ajax中用UpdatePanel異步回傳中用上傳控件好像后臺無法訪問到上傳控件中的值呢？有什么好的解決方案呢？請各位指教？
回復 引用 查看 2008-10-20 15:40 | 花香
下載下來試了下，總是出現 "名稱以無效字符開頭"的javascript錯誤
，麻煩看下
文件路徑是
C:\Documents and Settings\Administrator\桌面\1.jpg
回復 引用 查看 2008-10-20 15:50 | cloudgamer
@王國金
@克隆
謝謝支持
@Charles Chen
這個我也不清楚，因為我都沒用過
@花香
這個不是js錯誤，你去google一下吧
因為我這里沒有出現這個問題
可能是你的iis處理ashx文件時出現問題
回復 引用 查看 2008-10-20 17:33 | ghd2004
不錯！
3Q
回復 引用 查看 2008-10-21 00:02 | cloudgamer
@ghd2004
謝謝支持
回復 引用 查看 2008-10-21 20:00 | 一舟
greate!
回復 引用 查看 2008-10-21 21:21 | OOLi
很好，謝謝，可以學到好多東西啊，我是新手，謝謝
回復 引用 查看 2008-10-21 21:22 | OOLi
為什么有的地方用兩個!!啊
回復 引用 查看 2008-10-21 21:44 | OOLi
新手，請問 var a=function(){};
和a:function(){}有什么區別啊，后面這種形式什么時侯用到啊，謝謝啊
回復 引用 查看 2008-10-21 23:15 | cloudgamer
@一舟
@OOLi
謝謝支持
用!!是為了保證返回的是bool值
var a=function(){};效果跟function a(){}類似
a:function(){}是用在對象結構中，例如：
var b={a:function(){}}
回復 引用 2008-10-22 10:18 | humbass [未注冊用戶]
能不能寫個asp的示例啊
回復 引用 2008-10-22 12:32 | 來客 [未注冊用戶]
不錯學習
回復 引用 查看 2008-10-22 16:02 | cloudgamer
@humbass
@來客
謝謝支持
asp實例已經放出
回復 引用 查看 2008-10-22 17:16 | jolboy
好東西！佩服！
回復 引用 查看 2008-10-22 17:25 | 傾葉楓城
學習了，謝謝
回復 引用 查看 2008-10-22 19:39 | cloudgamer
@jolboy
@傾葉楓城
謝謝支持
回復 引用 查看 2008-10-23 08:58 | Jon.Hong
支持大文件嗎？
回復 引用 查看 2008-10-23 09:00 | cloudgamer
@Jon.Hong
這個沒研究
估計太大的不行
回復 引用 查看 2008-10-23 10:48 | 張玉峰
呵呵，很不錯的東東呀，大文件主要是IIS的限制吧
回復 引用 查看 2008-10-23 11:12 | cloudgamer
@張玉峰
大文件上傳顯示進度條網上有文章介紹
但沒找到實例
那位兄弟有的話發一份給我吧
回復 引用 查看 2008-10-23 14:22 | 小老好
不錯，晚上回家在看看！
回復 引用 查看 2008-10-23 18:35 | cloudgamer
@小老好
謝謝支持
回復 引用 查看 2008-10-24 15:41 | 漂零
大哥，太強了。學習
回復 引用 2008-10-25 10:57 | gdjlc [未注冊用戶]
感覺樓主的每篇文章都很經典,忍不住進來贊一句~~
回復 引用 2008-10-25 11:13 | 進來學習 [未注冊用戶]
下載下來試了下，總是出現 "名稱以無效字符開頭"的javascript錯誤
，麻煩看下
文件路徑是
C:\Documents and Settings\Administrator\桌面\1.jpg
-----------------------------------------------
我也一樣啊,直接打開點"上傳"沒反應.
把它放在VS在打開,點"上傳"后一直顯示上傳的loading.gif圖片,等了四五分鐘還是在上傳中,請LZ發發慈悲看一下 :)
(是.NET版本的)
回復 引用 2008-10-25 11:21 | 進來學習 [未注冊用戶]
知道原因了,是自己太懶了,沒去仔細看代碼,
//保存文件 file.SaveAs(System.Web.HttpContext.Current.Server.MapPath("./file/" + Path.GetFileName(file.FileName)));
這里的路徑改為自己的就行了...
回復 引用 查看 2008-10-25 19:37 | 興百放
不錯，不錯，有時間可以交流一下
回復 引用 查看 2008-10-25 21:44 | cloudgamer
@漂零
@gdjlc
@興百放
@進來學習
謝謝支持
回復 引用 查看 2008-10-25 23:23 | 愚公-
【asp版本補充】
由于很多人問我asp版本的后臺該如何寫，所以決定寫一個給大家。
這里我用了化境HTTP上傳程序2.1版（應該是最新版了）的無組件上傳類，但用的時候發現幾個問題（不知是我不會用還是asp本身的問題）：
1，當file控件的name是空時，后臺會找不到文件；
◆沒有name的話，瀏覽器不會發送文件數據。
2，文件名比較短時（例如我用"f"），后臺也找不到文件；
◆這個是程序錯誤，或者你用的無組件上傳類有BUG
3，當有多個file控件，如果使用相同的name，后臺只會保存一個文件；
◆網上流傳的各種ASP無組件上傳類共同的BUG，需要手動修改，改為多個同名控件時存為數組。
4，我在上傳文件后輸出的中文是亂碼（有時又正常）。
◆你程序的字符集問題。明確指定響應字符集，切源文件保存的編碼與響應字符集一致，就沒問題。
回復 引用 查看 2008-10-25 23:36 | cloudgamer
@愚公-
.net的例子就是沒有name的也能發送哦
回復 引用 2008-10-26 09:03 | 舉薦 [未注冊用戶]
其實jsp般也和file的name無關的，大家可以試試啊
回復 引用 查看 2008-10-26 17:28 | cloudgamer
@舉薦
有沒有name，file都會傳送到后臺
關鍵是后臺如何獲取這個文件
回復 引用 2008-10-28 09:44 | loo [未注冊用戶]
問下樓主的jsp版本都實現了什么功能，可不可以 就是在本地瀏覽個文件 然后點擊上傳，然后就上傳到服務器的制定目錄上？
回復 引用 查看 2008-10-28 10:37 | cloudgamer
@loo
可以的啊
這個系統就是實現這個功能
記得修改文件保存路徑
回復 引用 2008-10-29 13:42 | 學習生 [未注冊用戶]
為什么我下的。NET沒辦法上傳？
其他的都可以，如ASP的都可以，
回復 引用 查看 2008-10-29 13:51 | cloudgamer
@學習生
看看路徑有沒有問題
我寫的版本是asp.net 2.0的
還有就是看看是不是機器配置問題，因為其他人都能正常運行的
回復 引用 2008-10-29 15:02 | springhcq [未注冊用戶]
有機會要多向您學習
如果不嫌棄，可以加我為好友：123347564
回復 引用 2008-10-29 17:24 | wei_wei [未注冊用戶]
ASP版本有BUG，無法自動命名文件名，上傳兩個（含）以上的文件，提示上傳完成，但其實一個文件都沒上傳。
回復 引用 查看 2008-10-29 21:12 | cloudgamer
@springhcq
一起學習
不過我不怎么上q，有什么問題可以留言
@wei_wei
我試了一下
沒問題啊
你確定你下的是asp版而且沒有修改程序？
回復 引用 2008-10-30 00:09 | conqweal [未注冊用戶]
謝謝LZ的貢獻精神；
不過FLASH結合支持多個文件直接選取,
似乎是未來的方向.
回復 引用 查看 2008-10-30 00:26 | cloudgamer
@conqweal
FLASH跟js不是同一個東西
我覺得沒必要把這兩個東西進行比較
各自都有自己的發展的
回復 引用 查看 2008-11-02 15:52 | Freedom~Jun
文章不錯，收藏慢慢看
回復 引用 查看 2008-11-03 15:54 | 張榮華
@cloudgamer
關于iframe的創建其實可以不用瀏覽器檢測，可以利用innerHTML屬性來完成：
var frameContainer = document.createElement('div'); //創建一個用來放frame的空div
frameContainer.innerHTML = ' <iframe name="frame1" id="frame1" ></frame>';
document.body.appendChild(frameContainer);
回復 引用 2008-11-03 16:45 | 測試566 [未注冊用戶]
上傳中文文件名的文件，雖上傳成功，單文件名變成亂碼了，如何解決！
回復 引用 查看 2008-11-03 23:00 | cloudgamer
@Freedom~Jun
謝謝支持
@測試566
這個可能是前后臺編碼不一致的問題，你可以統一一下編碼，或者后臺重新定一個名也可以
@張榮華
這樣就要加一個div
還是不太好
回復 引用 2008-11-04 15:35 | Fans [未注冊用戶]
var Each = function(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
朋友 你能不能給我說下這句話的作用，還有一般什么時候用？ 有什么好處！麻煩了
回復 引用 查看 2008-11-04 16:17 | cloudgamer
@Fans
就是對list數組的每個元素作為fun函數的參數執行一次
這樣說明白嗎
回復 引用 2008-11-04 17:01 | 張帥 [未注冊用戶]
JSP版的讀不到文件流呀，在file.jsp中的第一個while循環就退出了，這是怎么回事。
回復 引用 查看 2008-11-04 17:44 | cloudgamer
@張帥
這個別人測試過應該可以的
因為我不懂jsp也沒辦法解答你
回復 引用 2008-11-05 10:46 | 張帥1 [未注冊用戶]
@cloudgamer
哦~！
回復 引用 2008-11-06 14:21 | bopo [未注冊用戶]
你好，我想問一下，我運行.NET實例一無法添加文件，一看提示我已存在該文件，可是什么都沒有啊。我清除緩存就是重啟的沒有變化，請問是什么問題，如何解決？
回復 引用 查看 2008-11-06 14:36 | cloudgamer
@張帥1
呵呵
@bopo
但我這里測試沒發現這個問題啊
確定沒修改我的程序？
回復 引用 2008-11-06 15:31 | bopo [未注冊用戶]
是啊。 沒有添加任何代碼。
就是直接運行你提供的.NET實例。
回復 引用 2008-11-06 15:36 | bopo [未注冊用戶]
對了，我使用的是IE８。
會不會程序在這個環境下有什么問題。
回復 引用 2008-11-06 15:55 | Fans [未注冊用戶]
兄弟
var Each = function(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
是不是直接產生閉包了呢？
還有我想知道您博客的預覽功能是怎么弄的？
回復 引用 2008-11-06 16:00 | bopo [未注冊用戶]
下面這句是判斷是否有相同文件吧？
if(o.value == file.value){ bCheck = false; }
我分別alert(o.value),alert(file.value)
看到他們兩值卻是一樣，可是我是添加第一個文件呢。
回復 引用 查看 2008-11-06 16:08 | cloudgamer
@bopo
ie8的話我就沒測試過了
你在這里的效果預覽中有沒有這個情況
你用ff試試
@Fans
我想你的理解是對的，主要還是想省點代碼
至于預覽功能，這個blog本身就可以直接貼html代碼
回復 引用 2008-11-06 16:35 | bopo [未注冊用戶]
一、轉了臺機方試了試，確實IE8下有問題啊~
二、FF我也試了，文件倒是能上傳成功（我到目錄下去看以存在），但是界面還是一直停在請等待。
回復 引用 查看 2008-11-06 17:12 | cloudgamer
@bopo
我用ff3和ie7測試過
沒有問題哦
回復 引用 查看 2008-11-06 18:26 | 謝小妹
好的,記下了!!!
回復 引用 2008-11-08 15:17 | own [未注冊用戶]
謝謝
回復 引用 2008-11-08 15:18 | own [未注冊用戶]
以后多多交流！我的q是105940137
回復 引用 2008-11-09 22:09 | 小可66 [未注冊用戶]
不錯 支持一下
回復 引用 2008-11-11 09:40 | noihsi [未注冊用戶]
很不錯的效果，只是提交頁面給程序員的時候，他們說不能跟 JSP 后臺連接上，真是有點暈！！多謝！！
回復 引用 查看 2008-11-11 10:36 | cloudgamer
@謝小妹
@own
@小可66
謝謝支持
@noihsi
jsp應該也行的
詳細看例子吧我不怎么懂jsp
回復 引用 2008-11-14 14:31 | poisson123 [未注冊用戶]
在FileUpload.prototype的initialize定義中
this.Distinct = !!this.options.Distinct
為什么前面要打兩個！非？
可不可以直接
this.Distinct = this.options.Distinct;代替呢？
回復 引用 查看 2008-11-14 14:48 | cloudgamer
@poisson123
用!!可以保證返回的是bool值
回復 引用 2008-11-15 20:18 | qingren [未注冊用戶]
怎么寫進數據庫啊？？？？？？？？？？？？
回復 引用 2008-11-15 20:20 | 多多大人 [未注冊用戶]
我發現發上傳的都不能重新命名，如果是重名，就只保存最后一個
回復 引用 查看 2008-11-16 00:29 | cloudgamer
@qingren
寫什么進數據庫？
@多多大人
不知你是說哪個版本
我這里是直接用原來的文件名作為文件名
你可以在程序中改名再保存文件的
回復 引用 2008-11-19 13:56 | hier [未注冊用戶]
我有個問題，asp.net開發的時候上傳一般不會在一個htm頁面上，如果一個aspx頁套用了模板頁，請問怎么將aspx;form里面的action指向'ashx'文件了？！
回復 引用 查看 2008-11-19 14:13 | cloudgamer
@hier
生成的頁面的form肯定有一個id的
你把這個id作為實例化的參數并用js修改它的action
不過之后頁面就不能正常提交了
回復 引用 2008-11-19 14:44 | hier [未注冊用戶]
呵呵，樓主東西做的很好，但是更多的應該想想應用方面的要不只能當"花瓶"了。
回復 引用 查看 2008-11-19 15:02 | cloudgamer
@hier
也不是花瓶啊
這是我們開發的網盤的文件上傳部分
asp.net開發也不是不要html啊
而且也可以用其他方法繞過提交的問題
例如插入一個新的form作為提交form，或者把文件上傳頁面作為iframe插入等等
而且我后臺方面很菜，說不定從后臺的方向想有好的解決方法（例如弄成一個控件什么的）
我想這里只是一個例子教學，運用時還是自己多思考一下吧
回復 引用 查看 2008-11-22 08:51 | fengsky491
學習了。
問問怎么收藏博主的文章，嘿嘿。。。
回復 引用 查看 2008-11-23 00:01 | amingo
我現在有這樣一個需求：
針對每一個附件有一個附件類型字段，比如：工作報告，問題總結等。
這就需要在每添加一個附件時，旁邊要有一個下拉菜單來選擇附加類型。
但如何將附件和這個附件的類型一起action到提交頁面呢？？而且附件和類型要一一對應。
回復 引用 查看 2008-11-23 00:20 | Hunts.C
哇塞，頂～！
回復 引用 查看 2008-11-23 01:56 | cloudgamer
@fengsky491
@Hunts.C
謝謝支持
@amingo
這個我確實沒想到很好的方法
我有一個思路是添加一個file后
根據file的value添加一個類型選擇，例如把value作為類型選擇的name
這樣提交到后臺后就能用FileName獲取對應的類型數據
不過沒有實踐過不是是否可行
回復 引用 2008-11-25 17:25 | 木木1983 [未注冊用戶]
無奈啊...多文件同時上傳.為什么只成功一個..我倒....
回復 引用 查看 2008-11-25 19:14 | cloudgamer
@木木1983
你說的是哪個版本
回復 引用 2008-11-28 14:38 | 劍無名 [未注冊用戶]
看了博主的文章，很受用。我利用博主此文實現的效果，結合DWR做了一個JAVA版的無刷新上傳，在仿網盤效果之上加入了上傳進度條的功能，在這里打個廣告：http://blog.163.com/linlong0613@126/blog/static/625258562008102804829960/。希望對java開發的朋友有幫助。謝謝博主大哥的辛勤勞動！
回復 引用 查看 2008-11-28 16:10 | Daniel_Wu
喜歡簡單的方法。
回復 引用 2008-12-01 01:07 | dragon_zhang [未注冊用戶]
jsp的路徑那里是不是必須給絕對路徑,我給了相對路徑怎么不好使!
回復 引用 查看 2008-12-01 08:23 | cloudgamer
@Daniel_Wu
@dragon_zhang
謝謝支持
你把相對路徑轉成絕對路徑就行了
jsp應該有這樣的方法吧
我不太懂jsp
回復 引用 2008-12-01 14:39 | 我是小菜 [未注冊用戶]
請問怎么設置文件大小的限制啊
回復 引用 2008-12-01 14:48 | 我是小菜 [未注冊用戶]
請樓主幫幫忙,謝謝
回復 引用 查看 2008-12-01 15:06 | cloudgamer
@我是小菜
由于安全問題文件大小一般來說在客戶端是不能檢測得到的，如果是圖片的話可以用下面這個方法獲取（ie6）
<img id=img1 src="" onload='alert("圖片大小"+img1.fileSize/1024+"K");'>
<input type=file name="file1" onchange="img1.src=this.value">
回復 引用 2008-12-01 20:08 | 我是小菜 [未注冊用戶]
首先感謝樓主的回復，在您沒有回復的時候，我自己試了一下這個
var fso = new ActiveXObject('Scripting.FileSystemObject');
var file1 = fso.GetFile(file.value);
file1.Size 就能返回，但這存在安全性的問題，必須在IE的安全里把“沒有設為安全的active”那個啟用,所以還是樓主高，呵呵，我在現在代碼的基礎上加了一Length和onLength，向你學習
回復 引用 查看 2008-12-02 08:23 | cloudgamer
@我是小菜
那個一般客戶端都是禁止的
所以一般行不通
回復 引用 查看 2008-12-03 17:32 | shawnliu
qiang
回復 引用 查看 2008-12-04 15:14 | 醉春風
樓主寫的這個不錯。
有一個小地方，“添加文件”按鈕問題。IE8中又變成了“瀏覽”字樣。
回復 引用 查看 2008-12-04 15:31 | cloudgamer
@shawnliu
@醉春風
謝謝支持
這個ie8的問題因為我沒有ie8也測試不了
而且ie8正式版都還沒出呢
到時再看吧
posted on 2008-12-08 11:04
CopyHoo 閱讀(723)
評論(0) 編輯 收藏 所屬分類:
JavaScript