js批量上傳文件

html代碼：

   <input type="file" id='upload' name="upload"  multiple="multiple" onchange="uploadFile(this);" style="display:none;" />
   <button id='uploadbtn' class="rscUploadBtn" type="button" onclick="document.getElementById('upload').click();" >選擇上傳文件</button><br />

 

js代碼：

        //file為input[type=file]元素，例如：onchange="uploadFile(this);"
        function uploadFile(file) {
            if (file && file.files && file.files.length > 0) {               
                //創建一個FormData空對象，然后使用append方法添加key/value
                var fd = new FormData();
                for (var i = 0; i < file.files.length; i++)
                    fd.append('file['+i+']',file.files[i]);
               
                fd.append("action", "filelistup");

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var data = JSON.parse(xhr.responseText);
                        if (data.returnValue == 0) {
                            //批量上傳成功
                            //處理成功后的邏輯
                            //TODO:.......

                        }
                        else alert(data.returnMsg);
                    }
                }

                //偵查當前附件上傳情況 可以設置進度條
                xhr.upload.onprogress = function (evt) {  
                    //var loaded = evt.loaded;//已經上傳大小情況
                    //var tot = evt.total;//附件總大小
                    //var per = Math.floor(100 * loaded / tot);  //已經上傳的百分比，如35
                   
                }

                xhr.open("post", GetHost() + 'xxx/index.ashx');
                xhr.send(fd);
            }
        }

 

c#接收文件代碼：

　　　　 /// <summary>
        /// 上傳文件
        /// </summary>
        /// <param name="httpRequest"></param>
        /// <param name="directoryName">保存文件的目錄</param>
        /// <param name="extList">需要接收文件的后綴名，用來過濾</param>
        /// <param name="fileNames">接收成功后，保存文件的文件名</param>
        /// <param name="errorMsg">錯誤消息</param>
        /// <returns></returns>
        public static bool UploadFile(HttpRequestBase httpRequest, string directoryName,List<string> extList,out List<string> fileNames, out string errorMsg) {
            bool rc = false;
            errorMsg = "";
            string fileFullName = "";
            fileNames = new List<string>();
            
            try {
                directoryName = (directoryName ?? "").Trim();
                if (directoryName != "") {
                    //如果不存在該文件夾，則創建一個
                    if (!Directory.Exists(directoryName))
                        Directory.CreateDirectory(directoryName);

                    //如果創建失敗
                    if (!Directory.Exists(directoryName))
                        errorMsg = string.Format("創建文件夾{0}失敗！", directoryName);
                    //存在該文件夾
                    else {
                        foreach (string upload in httpRequest.Files) {
                            if (!httpRequest.Files[upload].HasFile())
                                continue;

                            //獲取 上傳文件的名稱
                            string filename = Path.GetFileName(httpRequest.Files[upload].FileName);
                            //獲取 上傳文件的擴展名
                            string ext = Path.GetExtension(filename);

                            //檢查 文件擴展名
                            if (extList != null && extList.Count > 0) {
                                if (!extList.Contains(ext)) {
                                    errorMsg = string.Format("不支持{0}格式文件的上傳！", ext);
                                    return false;
                                }
                            }

                            //使用guid當做當前文件的文件名
                            filename = Guid.NewGuid().ToString().Replace("-", "") + ext;

                            //組合保存文件的全路徑名
                            fileFullName = Path.Combine(directoryName, filename);

                            httpRequest.Files[upload].SaveAs(fileFullName);
                            if (File.Exists(fileFullName))
                                fileNames.Add(filename);
                            else {
                                foreach (var fname in fileNames) {
                                    string flname = Path.Combine(directoryName, fname);
                                    if (File.Exists(flname))
                                        File.Delete(flname);
                                }
                                rc = false;
                                break;
                            }
                            rc = true;                            
                        }                       
                    }
                }
                else {
                    errorMsg = "上傳文件失敗！";
                    log.Error("存放文件的文件夾名稱不能為空！");
                }
            }
            catch (Exception ex) {
                log.Error("AddFile", ex);
                errorMsg = "上傳文件失敗！";
            }
            log.DebugFormat("上傳文件[{0}]{1} {2}", fileFullName, rc ? "成功!" : "失敗!", errorMsg);

            return rc;
        }

c#代碼調用示例：

            //獲取評論圖片的保存目錄
            string directoryName = Utils.GetMapPath("/upload/img");
            //需要過濾的圖片文件后綴名
            List<string> ext = new List<string> { };
            //圖片文件保存成功后獲取的圖片名稱
            List<string> fileNames = null;
            string errorMsg = "";
            //保存圖片文件
            if (Common.UploadFile(HttpContext.Current.Request.RequestContext.HttpContext.Request, directoryName, ext, out fileNames, out errorMsg)) {               

                //返回文件的相對路徑名字符串數組
                rc.SetReturnData(fileNames.Select(it=> Common.GetRelativePath(Path.Combine(directoryName, it))).ToList());
                rc.SetResult(ErrorCode.Success);
            }
            else
                rc.SetResult(ErrorCode.Failed);

            rc.SetContentType("text/html");