2022年6月12日 星期日

[研究][ASP.NET]FileUpload多檔案上傳

[研究][ASP.NET]FileUpload多檔案上傳

2022-06-12

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

Html/Elements/input/file - W3C Wiki 官方說明與範例
https://www.w3.org/wiki/Html/Elements/input/file

<label>Select file: <input type="file" name="imagefile" accept="image/jpeg, image/png"></label>
<input type="submit" value="upload">

FileUpload.AllowMultiple 屬性 (System.Web.UI.WebControls) | Microsoft Docs

https://docs.microsoft.com/zh-tw/dotnet/api/system.web.ui.webcontrols.fileupload.allowmultiple?view=netframework-4.8

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

伺服器端，ASP.NET 範例 AllowMultiple需要.NET 4.5 或以上

<asp:FileUpload ID="fileImages" AllowMultiple="true" runat="server" />

ASP.NET 範例 Multiple 屬性需要 HTML5 或以上

<asp:FileUpload ID="fileImages" Multiple="Multiple" runat="server" />

只靠伺服器端是不夠的，用戶端 (瀏覽器端) 如果是 IE8 或更舊，也不支援 HTML5，要靠 HTML5 Shiv 套件，它讓 IE6 ~ IE9, Safari 4.x, FireFox 3.x 可使用 HTML5 元素的基本 style (所以可能並非 100% 支援)
https://github.com/aFarkas/html5shiv

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:FileUpload ID="FileUpload1" AllowMultiple="true" runat="server" /><br />
        <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" /><br />
        <asp:Label ID="Label_MSG" runat="server"></asp:Label>
    </form>
</body>
</html>

檢視瀏覽器看到的 HTML Source

<input type="file" multiple="multiple" name="FileUpload1" id="FileUpload1" /><br />
<input type="submit" name="Button1" value="Upload" id="Button1" /><br />
<span id="Label_MSG"></span>

Default.aspx.cs

using System;
using System.IO;
using System.Web;

namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            HttpFileCollection httpFileCollection = Request.Files;
            for (int i = 0; i <= httpFileCollection.Count - 1; i++)
            {
                HttpPostedFile httpPostedFile = httpFileCollection[i];
                httpPostedFile.SaveAs(Server.MapPath("UploadFile/") + httpPostedFile.FileName);
            }
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            string filepath = Server.MapPath("\\UploadFile");
            HttpFileCollection httpFileCollection = Request.Files;
            Label_MSG.Text = string.Empty;

            for (int i = 0; i < httpFileCollection.Count; i++)
            {
                HttpPostedFile httpPostedFile = httpFileCollection[i];
                try
                {
                    if (httpPostedFile.ContentLength > 0)
                    {
                        Label_MSG.Text += "<br><u>File #" + (i + 1) + "</u><br>";
                        Label_MSG.Text += "File Content Type: " + httpPostedFile.ContentType + "<br>";
                        Label_MSG.Text += "File Size: " + httpPostedFile.ContentLength + "kb<br>";
                        Label_MSG.Text += "File Name: " + httpPostedFile.FileName + "<br>";

                        httpPostedFile.SaveAs(filepath + "\\" + Path.GetFileName(httpPostedFile.FileName));
                        Label_MSG.Text += "Location where saved: " + filepath + "\\" + Path.GetFileName(httpPostedFile.FileName) + "<p>";
                    }
                }
                catch (Exception ex)
                {
                    if (ex == null)
                        Label_MSG.Text = "不明錯誤。";
                    else
                        Label_MSG.Text = ex.Message;
                }
            }
        }
    }
}

實際測試




(完)

相關

張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)