一同事找的這個控件,覺得挺不錯的,到官方(http://www.access2008.cn/)下載源碼后稍加修改
html頁面代碼:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh_cn" lang="zh_cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多文件上傳組件</title> </head> <body bgcolor="#ffffff" style="text-align:center;"> <!--影片中使用的 URL--> <!--影片中使用的文本--> <!-- saved from url=(0013)about:internet --> <script language="javascript"> function challs_flash_update(){ //Flash 初始化函數 var a={}; //定義變量為Object 類型 a.title = "上傳文件"; //設置組件頭部名稱 a.FormName = "Filedata"; //設置Form表單的文本域的Name屬性 a.url = "ImgHandler.aspx"; //設置服務器接收代碼文件 a.parameter = ""; //設置提交參數,以GET形式提交,例:"key=value&key=value&..." a.typefile = ["Images (*.gif,*.png,*.jpg,*jpeg)","*.gif;*.png;*.jpg;*.jpeg;", "GIF (*.gif)","*.gif;", "PNG (*.png)","*.png;", "JPEG (*.jpg,*.jpeg)","*.jpg;*.jpeg;"]; //這里設置其他類型的文件 //a.typefile = ["File (*.rar,*.doc,*.zip,*.txt,*.docx,*.swf,*.html,*.htm)", "*.rar;*.doc;*.zip;*.txt;*.docx;*.swf;*.html;*.htm"]; //設置可以上傳文件 數組類型 //"Images (*.gif,*.png,*.jpg)"為用戶選擇要上載的文件時可以看到的描述字符串, //"*.gif;*.png;*.jpg"為文件擴展名列表,其中列出用戶選擇要上載的文件時可以看到的 Windows 文件格式,以分號相隔 //2個為一組,可以設置多組文件類型 a.newTypeFile = ["Images (*.gif,*.png,*.jpg,*jpeg)","*.gif;*.png;*.jpg;*.jpeg;","JPE;JPEG;JPG;GIF;PNG", "GIF (*.gif)","*.gif;","GIF", "PNG (*.png)","*.png;","PNG", "JPEG (*.jpg,*.jpeg)","*.jpg;*.jpeg;","JPE;JPEG;JPG"]; //設置可以上傳文件,多了一個蘋果電腦文件類型過濾 數組類型, 設置了此項,typefile將無效 //"Images (*.gif,*.png,*.jpg)"為用戶選擇要上載的文件時可以看到的描述字符串, //"*.gif;*.png;*.jpg"為文件擴展名列表,其中列出用戶選擇要上載的文件時可以看到的 Windows 文件格式,以分號相隔 //"JPE;JPEG;JPG;GIF;PNG" 分號分隔的 Macintosh 文件類型列表,如下面的字符串所示:"JPEG;jp2_;GI a.UpSize = 0; //可限制傳輸文件總容量,0或負數為不限制,單位MB a.fileNum = 10; //可限制待傳文件的數量,0或負數為不限制 a.size = 1; //上傳單個文件限制大小,單位MB,可以填寫小數類型 //a.FormID = ['select','select2']; //設置每次上傳時將注冊了ID的表單數據以POST形式發送到服務器 //需要設置的FORM表單中checkbox,text,textarea,radio,select項目的ID值,radio組只需要一個設置ID即可 //參數為數組類型,注意使用此參數必須有 challs_flash_FormData() 函數支持 a.autoClose = 1; //上傳完成條目,將自動刪除已完成的條目,值為延遲時間,以秒為單位,當值為 -1 時不會自動關閉,注意:當參數CompleteClose為false時無效 a.CompleteClose = true; //設置為true時,上傳完成的條目,將也可以取消刪除條目,這樣參數 UpSize 將失效, 默認為false a.repeatFile = true; //設置為true時,可以過濾用戶已經選擇的重復文件,否則可以讓用戶多次選擇上傳同一個文件,默認為false a.returnServer = true; //設置為true時,組件必須等到服務器有反饋值了才會進行下一個步驟,否則不會等待服務器返回值,直接進行下一步驟,默認為false a.MD5File = 0; //設置MD5文件簽名模式,參數如下 ,注意:FLASH無法計算超過100M的文件,在無特殊需要時,請設置為0 //0為關閉MD5計算簽名 //1為直接計算MD5簽名后上傳 //2為計算簽名,將簽名提交服務器驗證,在根據服務器反饋來執行上傳或不上傳 //3為先提交文件基本信息,根據服務器反饋,執行MD5簽名計算或直接上傳,如果是要進行MD5計算,計算后,提交計算結果,在根據服務器反饋,來執行是否上傳或不上傳 a.loadFileOrder=true; //選擇的文件加載文件列表順序,TRUE = 正序加載,FALSE = 倒序加載 a.mixFileNum=0; //至少選擇的文件數量,設置這個將限制文件列表最少正常數量(包括等待上傳和已經上傳)為設置的數量,才能點擊上傳,0為不限制 a.ListShowType = 2; //文件列表顯示類型:1 = 傳統列表顯示,2 = 縮略圖列表顯示(適用於圖片專用上傳) a.InfoDownRight = ""; //右下角統計信息的文本設置,文本中的 %1% = 等待上傳數量的替換符號,%2% = 已經上傳數量的替換符號,例子“等待上傳:%1%個 已上傳:%2%個” a.TitleSwitch = true; //是否顯示組件頭部 a.ForceFileNum = 0; //強制條目數量,已上傳和待上傳條目相加等於為設置的值(不包括上傳失敗的條目),否則不讓上傳, 0為不限制,設置限制后mixFileNum,autoClose和fileNum屬性將無效! a.autoUpload = false; //設置為true時,用戶選擇文件后,直接開始上傳,無需點擊上傳,默認為false; a.adjustOrder = true; //設置為true時,用戶可以拖動列表,重新排列位置 a.deleteAllShow = true //設置是否顯示,全部清除按鈕 a.language = 0; //語言包控制,0 自動檢測 1 簡體中文,2 繁體中文 3 英文 a.countData = true; //是否向服務器端提交組件文件列表統計信息,POST方式提交數據 //access2008_box_info_max 列表總數量 //access2008_box_info_upload 剩余數量 (包括當前上傳條目) //access2008_box_info_over 已經上傳完成數量 (不包括當前上傳條目) a.isShowUploadButton = true; //是否顯示上傳按鈕,默認為true return a ; //返回Object } function challs_flash_onComplete(a){ //每次上傳完成調用的函數,並傳入一個Object類型變量,包括剛上傳文件的大小,名稱,上傳所用時間,文件類型 var name=a.fileName; //獲取上傳文件名 var size=a.fileSize; //獲取上傳文件大小,單位字節 var time=a.updateTime; //獲取上傳所用時間 單位毫秒 var type=a.fileType; //獲取文件類型,在 Windows 上,此屬性是文件擴展名。 在 Macintosh 上,此屬性是由四個字符組成的文件類型 //document.getElementById('show').innerHTML+=name+' --- '+size+'字節 ----文件類型:'+type+'--- 用時 '+(time/1000)+'秒<br><br>' } function challs_flash_onCompleteData(a){ //獲取服務器反饋信息事件 //document.getElementById('show').innerHTML+='<font color="#ff0000">服務器端反饋信息:</font><br />'+a+'<br />'; } function challs_flash_onStart(a){ //開始一個新的文件上傳時事件,並傳入一個Object類型變量,包括剛上傳文件的大小,名稱,類型 var name=a.fileName; //獲取上傳文件名 var size=a.fileSize; //獲取上傳文件大小,單位字節 var type=a.fileType; //獲取文件類型,在 Windows 上,此屬性是文件擴展名。 在 Macintosh 上,此屬性是由四個字符組成的文件類型 //document.getElementById('show').innerHTML+=name+'開始上傳!<br />'; return true; //返回 false 時,組件將會停止上傳 } function challs_flash_onStatistics(a){ //當組件文件數量或狀態改變時得到數量統計,參數 a 對象類型 var uploadFile = a.uploadFile; //等待上傳數量 var overFile = a.overFile; //已經上傳數量 var errFile = a.errFile; //上傳錯誤數量 } function challs_flash_alert(a){ //當提示時,會將提示信息傳入函數,參數 a 字符串類型 //document.getElementById('show').innerHTML+='<font color="#ff0000">組件提示:</font>'+a+'<br />'; } function challs_flash_onCompleteAll(a){ //上傳文件列表全部上傳完畢事件,參數 a 數值類型,返回上傳失敗的數量 document.getElementById('show').innerHTML+='<font color="#ff0000">所有文件上傳完畢,</font>上傳失敗'+a+'個!<br />'; //window.location.href = 'http://www.baidu.com'; //傳輸完成后,跳轉頁面 } function challs_flash_onSelectFile(a){ //用戶選擇文件完畢觸發事件,參數 a 數值類型,返回等待上傳文件數量 //document.getElementById('show').innerHTML+='<font color="#ff0000">文件選擇完成:</font>等待上傳文件'+a+'個!<br />'; } function challs_flash_deleteAllFiles(){ //清空按鈕點擊時,出發事件 //返回 true 清空,false 不清空 return confirm("你確定要清空列表嗎?"); } function challs_flash_onError(a){ //上傳文件發生錯誤事件,並傳入一個Object類型變量,包括錯誤文件的大小,名稱,類型 var err=a.textErr; //錯誤信息 var name=a.fileName; //獲取上傳文件名 var size=a.fileSize; //獲取上傳文件大小,單位字節 var type=a.fileType; //獲取文件類型,在 Windows 上,此屬性是文件擴展名。 在 Macintosh 上,此屬性是由四個字符組成的文件類型 document.getElementById('show').innerHTML+='<font color="#ff0000">'+name+' - '+err+'</font><br />'; } function challs_flash_FormData(a){ // 使用FormID參數時必要函數 try{ var value = ''; var id=document.getElementById(a); if(id.type == 'radio'){ var name = document.getElementsByName(id.name); for(var i = 0;i<name.length;i++){ if(name[i].checked){ value = name[i].value; } } }else if(id.type == 'checkbox'){ var name = document.getElementsByName(id.name); for(var i = 0;i<name.length;i++){ if(name[i].checked){ if(i>0) value+=","; value += name[i].value; } } }else if(id.type == 'select-multiple'){ for(var i=0;i<id.length;i++){ if(id.options[i].selected){ if(i>0) value+=","; values += id.options[i].value; } } }else{ value = id.value; } return value; }catch(e){ return ''; } } function challs_flash_style(){ //組件顏色樣式設置函數 var a = {}; /* 整體背景顏色樣式 */ a.backgroundColor=['#f6f6f6','#f3f8fd','#dbe5f1']; //顏色設置,3個顏色之間過度 a.backgroundLineColor='#5576b8'; //組件外邊框線顏色 a.backgroundFontColor='#066AD1'; //組件最下面的文字顏色 a.backgroundInsideColor='#FFFFFF'; //組件內框背景顏色 a.backgroundInsideLineColor=['#e5edf5','#34629e']; //組件內框線顏色,2個顏色之間過度 a.upBackgroundColor='#ffffff'; //上翻按鈕背景顏色設置 a.upOutColor='#000000'; //上翻按鈕箭頭鼠標離開時顏色設置 a.upOverColor='#FF0000'; //上翻按鈕箭頭鼠標移動上去顏色設置 a.downBackgroundColor='#ffffff'; //下翻按鈕背景顏色設置 a.downOutColor='#000000'; //下翻按鈕箭頭鼠標離開時顏色設置 a.downOverColor='#FF0000'; //下翻按鈕箭頭鼠標移動上去時顏色設置 /* 頭部顏色樣式 */ a.Top_backgroundColor=['#e0eaf4','#bcd1ea']; //顏色設置,數組類型,2個顏色之間過度 a.Top_fontColor='#245891'; //頭部文字顏色 /* 按鈕顏色樣式 */ a.button_overColor=['#FBDAB5','#f3840d']; //鼠標移上去時的背景顏色,2個顏色之間過度 a.button_overLineColor='#e77702'; //鼠標移上去時的邊框顏色 a.button_overFontColor='#ffffff'; //鼠標移上去時的文字顏色 a.button_outColor=['#ffffff','#dde8fe']; //鼠標離開時的背景顏色,2個顏色之間過度 a.button_outLineColor='#91bdef'; //鼠標離開時的邊框顏色 a.button_outFontColor='#245891'; //鼠標離開時的文字顏色 /* 文件列表樣式 */ a.List_scrollBarColor="#000000" //列表滾動條顏色 a.List_backgroundColor='#EAF0F8'; //列表背景色 a.List_fontColor='#333333'; //列表文字顏色 a.List_LineColor='#B3CDF1'; //列表分割線顏色 a.List_cancelOverFontColor='#ff0000'; //列表取消文字移上去時顏色 a.List_cancelOutFontColor='#D76500'; //列表取消文字離開時顏色 a.List_progressBarLineColor='#B3CDF1'; //進度條邊框線顏色 a.List_progressBarBackgroundColor='#D8E6F7'; //進度條背景顏色 a.List_progressBarColor=['#FFCC00','#FFFF00']; //進度條進度顏色,2個顏色之間過度 /* 錯誤提示框樣式 */ a.Err_backgroundColor='#C0D3EB'; //提示框背景色 a.Err_fontColor='#245891'; //提示框文字顏色 a.Err_shadowColor='#000000'; //提示框陰影顏色 return a; } var isMSIE = (navigator.appName == "Microsoft Internet Explorer"); function thisMovie(movieName){ if(isMSIE){ return window[movieName]; }else{ return document[movieName]; } } </script> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="500" height="400" id="update" align="middle"> <param name="allowFullScreen" value="false" /> <param name="allowScriptAccess" value="always" /> <param name="movie" value="update.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="update.swf" quality="high" bgcolor="#ffffff" width="500" height="400" name="update" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <div id="show" style="margin-top:20px; width:500px; text-align:left;"></div> </body> </html>
處理文件的aspx頁面:
protected void Page_Load(object sender, EventArgs e) { //--------------------------------------------------------------------------------------------- //組件設置a.MD5File為2,3時 的實例代碼 if (Request.QueryString["access2008_cmd"] != null && Request.QueryString["access2008_cmd"] == "2")//服務器提交MD5驗證后的文件信息進行驗證 { // Request.QueryString["access2008_File_name"]; //文件名 // Request.QueryString["access2008_File_size"]; //文件大小,單位字節 // Request.QueryString["access2008_File_type"]; //文件類型 例如.gif .png // Request.QueryString["access2008_File_md5"]; //文件的MD5簽名 Response.Write("0");//返回命令 0 = 開始上傳文件, 2 = 不上傳文件,前台直接顯示上傳完成 Response.End(); } else if (Request.QueryString["access2008_cmd"] != null && Request.QueryString["access2008_cmd"] == "3") //服務器提交文件信息進行驗證 { // Request.QueryString["access2008_File_name"]; //文件名 // Request.QueryString["access2008_File_size"]; //文件大小,單位字節 // Request.QueryString["access2008_File_type"]; //文件類型 例如.gif .png Response.Write("1");//返回命令 0 = 開始上傳文件,1 = 提交MD5驗證后的文件信息進行驗證, 2 = 不上傳文件,前台直接顯示上傳完成 Response.End(); } //--------------------------------------------------------------------------------------------- if (Request.Files["Filedata"] != null)//判斷是否有文件上傳上來 { SaveImages("File/"); //其他表單數據接收 if (Request.QueryString["access2008_File_md5"] != null) { Response.Write("<br/>"); Response.Write("MD5效驗" + Request.QueryString["access2008_File_md5"]); } Response.Write("<br/>"); Response.Write("你選擇的是<font color='#ff0000'>" + Request.Form["select"] + "</font>--<font color='#0000ff'>" + Request.Form["select2"] + "</font>"); Response.End(); } } #region 保存方法 /// <summary> /// 保存文件 /// </summary> /// <param name="url">保存路徑,填寫相對路徑</param> /// <returns></returns> private void SaveImages(string url) { ///'遍歷File表單元素 HttpFileCollection files = HttpContext.Current.Request.Files; ///'檢查文件擴展名字 //HttpPostedFile postedFile = files[iFile]; HttpPostedFile postedFile = Request.Files["Filedata"]; //得到要上傳文件 string fileName, fileExtension, filesize; fileName = System.IO.Path.GetFileName(postedFile.FileName.ToString()); //得到文件名 filesize = System.IO.Path.GetFileName(postedFile.ContentLength.ToString()); //得到文件大小 if (fileName != "") { fileExtension = System.IO.Path.GetExtension(fileName);//'獲取擴展名 string NewsName = "File_" + DateTime.Now.ToString("yyyyMMddHHmmss"); fileName = NewsName + fileExtension; //注意:可能要修改你的文件夾的匿名寫入權限。 postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath(url) + fileName); } Response.Write(fileName + "上傳成功"); } #endregion
需要注意的是update.swf顯示頁處理頁需要在同一級目錄下,否則會報Error #2038錯誤
其中的MD5,他們說:每個文件的MD5簽名都是唯一的,在上傳文件比較多時,可以不用上傳到服務器,直接檢測服務器是否有這個文件,直接完成,只做一個標記,建議關閉。
源代碼外鏈地址:http://sdrv.ms/Uf2RVg