chi's coding life

FileUpload 多檔案(照片)上傳

1.首先請確認.net FrameWork 是否在4.0 以上，因為4.0以上FileUpload 有支援 AllowMutiple得選項

這樣就可以上傳多張檔案囉~~

2.後端程式碼

(1)上傳檔案目錄

(2)判斷是否為jpg png gif 檔案

(3)是否超過10M  >> .net 本身預設為4MB 若檔案很大需要更改則要更改webConfig 

protected void Button1_Click(object sender, EventArgs e)
        {
            //檔案目錄
            string savePath = "D:\\imageTest\\"; 
            int total = 0;
            if (FileUpload1.HasFile)
            {
                //附檔名
                string ext = System.IO.Path.GetExtension(FileUpload1.FileName);

                if (ext == ".jpg" || ext == ".png" || ext == ".gif")
                {
                    //判斷上傳檔案的整個檔案大小
                    foreach (HttpPostedFile file in FileUpload1.PostedFiles)
                    {
                        //檔案大小
                        int size = FileUpload1.PostedFile.ContentLength; 
                        total = total + size;
                    }
                    //若總體大小超過10M則顯示檔案過大，否則進行存取
                    if (total < 10485760)
                    {
                        foreach (HttpPostedFile file in FileUpload1.PostedFiles)
                        {
                            string fileName = Path.GetFileName(file.FileName);
                            file.SaveAs(savePath + fileName);
                        }
                        Label1.Text = FileUpload1.PostedFiles.Count.ToString() + " Files Uploaded Successfully";
                    }
                    else
                    {
                        Label1.Text = "檔案過大，上傳檔案為:" + (total / 1024 / 1024) + "MB";
                    }

                }
                else
                {
                    Label1.Text = "檔案格式異常，上傳檔案格式為" + ext;
                }
            }
            else
            {
                Label1.Text = "請先挑選檔案";
            }
        }

FrameWork 4.0 後，多檔案上傳就變得很簡單。

在撰寫時要查的東西可能就是不知道怎麼抓file的附檔名 檔案大小 以及 多檔案的陣列

可觀看上方的程式碼就可以知道如何撰寫囉
 

---

因為我本身這個簡易的上傳圖片是為了讓手機可以上傳，但卻碰到一個問題是IOS可以android卻不行多張上傳

原來是android 必須更新到 5.0以上 以及 chrome 要49+ 才可使用多選功能( 長按照片會有打勾及可多選)

以下參考網址 https://caniuse.com/#feat=input-file-multiple

至於如何利用css 根據不同解析度去調整fileupload整個的視覺大小，則在另一篇講囉

另一篇: 2017-12- 08 C# FileUpload 檔案上傳限制