Struts 文件上傳實戰 (四)：JSP 頁面表單構建與 Struts 標籤庫應用

頁面結構概覽

planManage.jsp 採用表格佈局，包含三大區塊：基本信息、計劃內容、附件上傳。核心在於正確使用 Struts HTML 標籤庫綁定 ActionForm 屬性，並設置 enctype="multipart/form-data" 支援文件上傳。

完整 JSP 代碼（整理優化版）

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<% request.setCharacterEncoding("UTF-8"); %>
<html:html locale="true">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="../css/main.css" rel="stylesheet" type="text/css">
    <title>Add TrainPlan</title>
</head>
<body>
    <!-- 標題欄 -->
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="tabletoolbar">
        <tr><td class="tabletitletext"><div align="center">Add TrainPlan</div></td></tr>
    </table>

    <!-- 核心表單：enctype 關鍵 -->
    <html:form action="/maintainAction.do" method="post" enctype="multipart/form-data">

        <!-- 區塊 1：基本信息 -->
        <table width="600" border="0" align="center" cellpadding="7" cellspacing="0" class="InputFrameMain">
            <tr>
                <td width="3%">&nbsp;</td>
                <td width="11%"><strong>Title</strong></td>
                <td width="22%"><html:text maxlength="50" property="trainPlan.p_title" size="50"/></td>
                <td width="11%"><div align="center"><strong>Issue Time</strong></div></td>
                <td width="22%">
                    <html:text property="trainPlan.issue_time" size="10"/>
                    <html:button value="Date" property="Submit"/> <!-- 彈出日期選擇器 JS 需自行實現 -->
                </td>
                <td width="10%">&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><strong>Post Index</strong></td>
                <td><!-- 原文此處缺失輸入框，補充 --><html:text property="trainPlan.post_index" size="10"/></td>
                <td><div align="center"><strong>Issuer</strong></div></td>
                <td><html:text maxlength="10" property="trainPlan.issuer" size="10"/></td>
            </tr>
        </table>
        <br>

        <!-- 區塊 2：計劃內容 (textarea) -->
        <table width="595" border="0" align="center" cellpadding="7" cellspacing="0" class="InputFrameMain">
            <tr>
                <td width="10%"><strong>TrainPlan Content</strong>:</td>
                <td width="90%"><html:textarea cols="80" rows="5" property="trainPlan.p_content"></html:textarea></td>
            </tr>
        </table>
        <br>

        <!-- 區塊 3：附件上傳 (最多 3 個) -->
        <table width="610" border="0" align="center" cellpadding="7" cellspacing="0" class="InputFrameMain">
            <tr>
                <td width="595">
                    <span class="InputAreaCell"><strong>
                        Accessory1<br>
                        <html:file maxlength="60" property="theFile1" size="60"/><br>
                        Accessory2<br>
                        <html:file maxlength="60" property="theFile2" size="60"/><br>
                        Accessory3<br>
                        <html:file maxlength="60" property="theFile3" size="60"/><br>
                    </strong></span>
                </td>
            </tr>
            <tr>
                <td height="30" colspan="8" align="center">
                    <html:submit styleClass="button" value="提交" property="Submit" onclick="return RgTest()"/>
                </td>
            </tr>
        </table>

    </html:form>
</body>
</html:html>

關鍵標籤用法解析

常見問題與優化建議

1. 編碼亂碼：JSP 頁首 <% request.setCharacterEncoding("UTF-8"); %> 僅影響當前請求解析，全局建議配置 CharacterEncodingFilter (Spring) 或 Tomcat URIEncoding="UTF-8"。
2. 日期選擇器：原文 <html:button value="Date" property="Submit"/> 僅是普通按鈕，需整合 JavaScript 日曆組件（如 jQuery UI Datepicker、laydate）並綁定 trainPlan.issue_time 輸入框。
3. 客戶端驗證：onclick="return RgTest()" 應檢查必填項、文件類型/大小，減少無效提交。
4. 無障礙與響應式：現代開發建議棄用 Table 佈局，改用 CSS Flex/Grid + 語義化 HTML，並添加 <label>、ARIA 屬性。
5. 多文件上傳 UX：單一 <input type="file" multiple> + JS 動態顯示文件列表，優於固定 3 個 <html:file>。

此 JSP 展示了 Struts 1.x 時代典型的「標籤庫綁定 + Table 佈局」風格，理解其綁定機制有助於遷移至 Thymeleaf/JSP 2.0+ 或前後端分離架構時的表單數據協議設計。