如何在CSJS中获取xp:fileUpload选中文件大小并阻止提交？

当然可行啦！在客户端用CSJS提前校验xp:fileUpload选中的文件大小，不仅能避免因服务器端限制导致的提交失败，还能给用户即时反馈，提升体验。下面给你详细讲怎么实现：

核心思路 #

xp:fileUpload在前端会渲染成HTML的<input type="file">元素，我们可以通过CSJS获取这个元素的files属性拿到选中的文件对象，然后读取其size属性（字节数）做校验，一旦超过限制就阻止表单提交。

具体实现步骤 #

1. 给文件上传控件设置ID #

首先确保你的xp:fileUpload有明确的ID，方便CSJS定位：

<xp:fileUpload id="fileUpload1" allowMultiple="false"></xp:fileUpload>

如果需要支持多文件上传，把allowMultiple设为true即可。

2. 在提交按钮中添加CSJS校验逻辑 #

在提交按钮的onclick事件里加入校验脚本，示例如下：

<xp:button value="提交文件" id="submitBtn">
    <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
        <xp:this.script><![CDATA[
            // 获取前端的文件输入元素
            var fileInput = document.getElementById("#{id:fileUpload1}");
            
            // 先检查是否选中了文件
            if (fileInput.files.length === 0) {
                alert("请先选择要上传的文件！");
                return false;
            }

            // 定义允许的最大文件大小，这里以10MB为例（10*1024*1024字节）
            const maxAllowedSize = 10 * 1024 * 1024;
            let isOverSize = false;

            // 处理单文件/多文件上传的情况
            for (let i = 0; i < fileInput.files.length; i++) {
                const file = fileInput.files[i];
                if (file.size > maxAllowedSize) {
                    alert(`文件「${file.name}」大小超过限制！最大允许上传10MB的文件。`);
                    isOverSize = true;
                    break;
                }
            }

            // 如果有文件超标，阻止提交
            if (isOverSize) {
                return false;
            }

            // 校验通过，允许提交表单
            return true;
        ]]></xp:this.script>
    </xp:eventHandler>
</xp:button>

补充说明 #

你提到的size属性是服务器端的配置项，用来设置服务器允许接收的最大文件大小，和客户端CSJS校验是互补的：客户端校验能提前拦截，减少无效请求；服务器端设置是最后一道防线，避免恶意绕过客户端校验的情况。

内容的提问来源于stack exchange，提问作者Patrick Kwinten