js實現多檔案上傳

首先，將以下js代碼放入頁面這裡我判斷的是只能上傳xls格式的檔案，可以根據自己的需求修改js中的checkExcel方法

</pre><pre name="code" class="javascript"><script type="text/javascript"> 
    var __FILE_INDEX = 0; //檔案標識    
    var __LOADING_TIP_DIV = null; 
    var __ICON_PATH = "<%=Request.ApplicationPath%>/Images"; 
    /**  
    * 對選擇的檔案進行格式校正,只能選擇xls格式的檔案  
    */ 
    function checkFile(fileObj) { 
        var objSpan = document.getElementById("span_" + fileObj.id); 
        if (!checkExcel(fileObj.value)) { 
            objSpan.innerHTML = "<img title='錯誤' src='" + __ICON_PATH + "/check_error.png' border='0'></img><font style='color:red;font-size:12px'>只能匯入xls格式檔案！</font>" 
            fileObj.errFlag = true; 
        } else { 
            objSpan.innerHTML = "<img title='正確' src='" + __ICON_PATH + "/check_right.png' border='0'></img>" 
            fileObj.errFlag = false; 
        } 
        if (fileObj.value != "" && fileObj.noDelete != "true") { 
            document.getElementById("del_" + fileObj.id).innerHTML = "<span title='刪除檔案' onclick='deleteFile(\"" + fileObj.id + "\")' style='font-size:12px;color: #4684b2;cursor:pointer;border-bottom:1px solid #4684b2'>刪除</span>"; 
        } 
    } 
 
    /**  
    * 刪除選擇的檔案 www.2cto.com   
    */ 
    function deleteFile(fileId) { 
        var trNode = document.getElementById("tr_" + fileId); 
        var trParent = trNode.parentNode; 
        trParent.removeChild(trNode); 
    } 
 
    /**  
    * excel校正函數  
    */ 
    function checkExcel(filePath) { 
        var subfix = filePath.substring(filePath.lastIndexOf(".") + 1); 
        if (subfix != "xls") { 
            return false; 
        } 
        return true; 
    } 
    /**  
    * 檔案上傳時的校正邏輯  
    */ 
    function excelUpload() { 
        var fileCount = 0; 
        var files = document.getElementsByTagName("INPUT"); 
        for (var i = 0; i < files.length; i++) { 
            if (files[i].type.toLowerCase != 'file') continue; 
            if (files[i].errFlag) { 
                alert("匯入的檔案只能是xls格式，請重新選擇."); 
                files[i].focus(); 
                return; 
            } 
            if (files[i].value != "") 
                fileCount++; 
        } 
        if (fileCount < 1) { 
            alert("請先選擇要上傳的資料檔案!"); 
            return; 
        } 
        document.getElementById("uploadExcelForm").submit(); 
    } 
    /**  
    * 添加檔案  
    */ 
    function addFile() { 
        ++__FILE_INDEX; 
        var fileId = "file" + __FILE_INDEX; 
        var uploadTable = document.getElementById("tableUploadFile") 
        var trElement = uploadTable.insertRow(-1); 
        trElement.id = "tr_" + fileId; 
        var tdElement = trElement.insertCell(-1); 
        tdElement.id = "td_" + fileId; 
        tdElement.innerHTML = "<input type='file' name='" + fileId + "' id='" + fileId + "' size='30' style='padding-left:5px;width:300px;cursor:pointer;' >" 
               + "<span id='span_" + fileId + "'></span>" 
               + "<span id='del_" + fileId + "'></span>"; 
    }    
</script> 

 

接下來是後台代碼：

[csharp]  //儲存上傳檔案 
        try 
        { 
            for (int i = 0; i < Request.Files.Count; i++) 
            { 
                if (Request.Files["file" + i] != null) 
                { 
                    HttpPostedFile filePost = Request.Files["file" + i]; 
                    string filename = filePost.FileName; 
                    Random rd = new Random(); 
                    filename = filename.Substring(filename.LastIndexOf('\\') + 1); 
                    string savePath = Server.MapPath("UpLoadFile/" + rd.Next() + filename); 
                    filePost.SaveAs(savePath); 
                    UpLoadFile upLoadfile = new UpLoadFile(); 
                    upLoadfile.FileObj = mubiao.Obj_Id; 
                    upLoadfile.FileAddr = savePath; 
                    upLoadfile.FileUpLoadDate = DateTime.Now; 
                    new UpLoadFileBLL().InsertUpLoadFile(upLoadfile); 
                } 
            } 
        } 
        catch (Exception) 
        { 
            PageMessageBoxShow("檔案上傳失敗！");             
        } 

 

 

摘自 天易LoveZLL