asp.net 批量多選檔案上傳代碼

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

多選檔案上傳，已經非常多了，選擇性多了可能有時候要比較下哪個更合適，結合到項目中使用更方便才是最重要的。很多的多選上傳基本上都是調用的swf檔案，確實用flash 或flex開發一個多選上傳的功能很方便，比如flex裡內建的FileReferenceList對象本身就支援檔案的多選，有這個的話就方便多了，下面要說的主要也是基於flex開發的一個多選上傳功能。

　　主要實現的功能如下：

　　一、選擇多個檔案上傳並顯示單個檔案的上傳進度

　　二、顯示所有檔案總的上傳進度

　　三、顯示所有上傳檔案的總大小

　　四、上傳前可以刪除任意選定一個或多個檔案(按住Ctrl或Shift鍵)

　　五、ASP.NET頁面調用產生的swf檔案非同步上傳到伺服器

　　先看下示範的截圖，如下：

　　大致功能和上面截圖一樣，下面主要說下ASP.NET裡怎麼調用，FLEX的裡面代碼我這裡就不詳細說明了，FLEX裡面的代碼不多，文章後面提供下載，用flex3.0或4.0可以開啟運行。

　　其中有一個地方說明一下，就是在多選刪除的地方，為了保證隨意多選刪除的正確性，需要把選定的索引項目降序排序，每次從數組最大處刪除，避免迴圈刪除時索引超界。

  
   function deleteItem():void{
   
    var selectItems:Array = process_list.selectedItems;
   
    var selectIndex:Array = process_list.selectedIndices;
   
    selectIndex = selectIndex.sort(2);//索引按降序排序
   
    var iCount:int = selectItems.length;
   
    var sizeMum:Number = 0;
   
    for(var i:int=0;i<iCount;i++){
   
        info.splice(selectIndex[i],1);
   
        fileRef.fileList.splice(selectIndex[i],1);//移除的選擇項按索引從大到小移除，以便移除過程中索引不超界
   
    }
   
    for(var j:Number=0;j<fileRef.fileList.length;j++){                        
   
        sizeMum+=fileRef.fileList[j].size;                    
   
    }            
   
    process_list.dataProvider = info;
   
    tip_txt.text="共"+fileRef.fileList.length+"個檔案  "+(sizeMum/(1024*1024)).toFixed(4).toString()+"MB";
   
                        
   
    if(info.length<=0){
   
        delete_btn.enabled = false;
   
    }                    
   
}

　　調用其實也比較簡單，建立一個asp教程x頁面載入產生的swf檔案，這裡產生的檔案名稱是upload.swf，利用flex內建的swfobject.js裡面的方法載入，如下：

  
   <html xmlns="http://www.w3.org/1999/xhtml" >
   
<head>
   
    <title>無標題頁</title>     
   
            <style type="text/css教程" media="screen"> 
   
            html, body    { height:100%; }
   
            body { margin:0; padding:0; overflow:auto; text-align:center; 
   
                   background-color: #ffffff; }   
   
            #flashContent { display:none; }
   
        </style>
   
            
   
        <script type="text/網頁特效" src="swfobject.js"></script>   
   
        <script type="text/javascript" >
   

   
            var swfVersionStr = "10.0.0";
   
            var xiSwfUrlStr = "playerProductInstall.swf";
   
            var flashvars = {};
   
            flashvars.url = "SaveFile.aspx?Param=ID|100,NAME|測試使用者";
   
            var params = {};
   
            params.quality = "high";
   
            params.bgcolor = "#ffffff";
   
            params.allowscriptaccess = "sameDomain";
   
            params.allowfullscreen = "true";
   
            var attributes = {};
   
            attributes.id = "upload";
   
            attributes.name = "upload";
   
            attributes.align = "middle";
   
            swfobject.embedSWF(
   
                "upload.swf", "flashContent", 
   
                "587", "370", 
   
                swfVersionStr, xiSwfUrlStr, 
   
                flashvars, params, attributes);
   
    
   
            function uploadCompelete(){
   
                //完成後的操作，如頁面跳轉或關閉當前頁
   
                document.getElementById('btnUpload').disabled = false;
   
            }
   
            function submitForm(){
   
                thisMovie("upload").uploadfile();
   
            }
   
            function thisMovie(movieName) {
   
                if (navigator.appName.indexOf("Microsoft") != -1) {
   
                    return window[movieName];
   
                } else {
   
                    return document[movieName];
   
                }
   
            }
   
            function disabledButton()
   
             {
   
                document.getElementById('btnUpload').disabled = true;
   
             }
   
    
   
        </script>
   
</head>
   
<body>
   
   <div id="flashContent"  style="width:587px; height:380px">
   
            </div>
   
        <br />
   
        <input id="btnUpload" style="width: 71px" type="button" value="上 傳" onclick="submitForm()" />
   
</body>
   
</html>

　　如上，頁面放置一個按鈕，執行upload.swf裡面的uploadfile方法，在flex裡面其實是回調了uploadHandler方法：

  
   //===================
   
// 點擊上傳按鈕
   
//===================
   
internal function uploadHandler():void{
   
    if(uploadFile_num!=0) return;
   
    if(process_list.dataProvider==null || info.length<=0){
   
        Alert.show("您還未選擇檔案!","提示資訊");
   
        return;
   
    }
   
    else
   
    {
   
        ExternalInterface.call("disabledButton"); //點上傳後禁用按鈕 
   
    }
   
    for(var i:Number=0;i<fileRef.fileList.length;i++){                
   
        upload_size_total+=fileRef.fileList[i].size;                                        
   
    }                                    
   
    uploadfile(uploadFile_num);    
   
    add_btn.enabled = false; //點上傳後禁用瀏覽按鈕 
   
    delete_btn.enabled = false;//點上傳後禁用刪除按鈕 
   
}

　　SaveFile.aspx頁面主要是接收並隱藏檔，如下：

  
   protected void Page_Load(object sender, EventArgs e)
   
{
   
    //string param = Request["Param"];
   
    string path = Server.MapPath("files/");
   
    if (!Directory.Exists(path))
   
    {
   
        Directory.CreateDirectory(path);
   
    }
   
    //HttpFileCollection files = Request.Files;
   
    //string fileName = string.Empty;
   
    //for (int i = 0; i < files.Count; i++)
   
    //{
   
    //    fileName = Path.GetFileName(files[i].FileName).ToLower();
   
    //    files[i].SaveAs(path + fileName);
   
    //}
   
    HttpPostedFile file = Request.Files["Filedata"]; //檔案是一個一個非同步提交過來，所以不需要迴圈檔案集合
   
    if (file != null && file.ContentLength > 0)
   
    {
   
        file.SaveAs(path+Request.Form["filename"]);
   
    }
   
}

　　畢竟不是以檔案流的形式接收和儲存，所以如果是上傳大檔案的話，可以看到顯示頁面已經上傳完成100%，但是到這個處理儲存頁面會停頓一會，接收並儲存完成後前台頁面才會反應過來。

　　還有一點要提一下，就是如果傳遞的參數包含中文的話，需要config編碼格式為utf-8格式，但有原先的系統可能是gb2312格式的，改成utf-8可能對系統有影響，可以單獨建一個webconfig，上傳的時候就讀單獨的config。查了下說flash.system.System.useCodePage=true;設定可以解決中文亂碼問題，我試了下還是不好用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

asp.net 批量多選檔案上傳代碼

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support