CFUpdate上傳控件的使用


一同事找的這個控件,覺得挺不錯的,到官方(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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM