Delphi IntraWeb TIWFileUploader客户端管理需求与实现问询

针对你需要用Delphi IntraWeb的TIWFileUploader实现的三个核心需求，以下是纯客户端的完整解决方案，替代你之前的服务器端处理方案：

1. 绑定自定义文件选择事件，获取文件元数据 #

利用TIWFileUploader的客户端JS对象，直接拦截文件选择事件，无需服务器回调即可获取文件名、大小等信息。在组件的OnRender事件中注入自定义JS：

procedure TIWForm1.IWFileUploader1Render(Sender: TObject);
begin
  // 绑定文件选择change事件
  IWFileUploader1.JSInterface.AddEvent('change', 
    'function(e) {' +
    '  const selectedFile = e.target.files[0];' +
    '  if (selectedFile) {' +
    '    // 提取文件核心信息' +
    '    const fileName = selectedFile.name;' +
    '    const fileSize = selectedFile.size;' +
    '    // 触发自定义验证逻辑' +
    '    handleFileValidation(fileName, fileSize);' +
    '  }' +
    '}'
  );
end;

编写客户端JS函数实现验证与用户交互：

function handleFileValidation(fileName, fileSize) {
  // 示例：验证文件名前缀规则
  if (!fileName.startsWith('REQ_')) {
    const extraDesc = prompt('文件名不符合规范，请补充说明：');
    if (extraDesc) {
      // 更新自定义显示卡片
      renderFileCard(fileName, fileSize, extraDesc);
      // 显示上传按钮
      document.getElementById('btnCustomUpload').style.display = 'inline-block';
    } else {
      // 用户取消，清空文件选择
      IW.FileUploader.IWFileUploader1.reset();
      // 隐藏上传按钮
      document.getElementById('btnCustomUpload').style.display = 'none';
    }
  } else {
    // 文件名合规，直接更新显示
    renderFileCard(fileName, fileSize, '');
    document.getElementById('btnCustomUpload').style.display = 'inline-block';
  }
}

2. 隐藏默认信息面板 #

同样在OnRender事件中注入JS，直接隐藏组件自带的信息面板：

procedure TIWForm1.IWFileUploader1Render(Sender: TObject);
begin
  // 隐藏默认文件信息面板
  IWFileUploader1.JSInterface.AddScript(
    'document.getElementById("' + IWFileUploader1.ClientID + '_info").style.display = "none";'
  );
end;

3. 自定义文件名显示界面（卡片式） #

在页面添加一个TIWHTMLPanel（命名为pnlFileCard）作为自定义显示容器，通过JS动态生成卡片内容：

function renderFileCard(name, size, extraInfo) {
  const cardContainer = document.getElementById('pnlFileCard');
  // 格式化文件大小为MB
  const formattedSize = (size / (1024 * 1024)).toFixed(2) + ' MB';
  // 构建卡片HTML结构
  cardContainer.innerHTML = `
    <div style="border:1px solid #e0e0e0; border-radius:8px; padding:16px; margin:10px 0;">
      <h4 style="margin-top:0;">已选择文件</h4>
      <p><strong>文件名：</strong>${name}</p>
      <p><strong>文件大小：</strong>${formattedSize}</p>
      ${extraInfo ? `<p><strong>补充说明：</strong>${extraInfo}</p>` : ''}
    </div>
  `;
}

4. 客户端控制上传按钮显示 #

添加一个自定义TIWButton（命名为btnCustomUpload），初始设置Visible := False，点击时触发上传：

procedure TIWForm1.btnCustomUploadAsyncClick(Sender: TObject; EventParams: TStringList);
begin
  // 调用客户端上传方法
  IWFileUploader1.JSInterface.CallFunction('startUpload', []);
end;

方案优势 #

• 全程客户端处理，无服务器往返，响应更流畅
• 自定义显示界面完全可控，彻底解决默认面板文件名截断问题
• 上传按钮显示逻辑实时响应，无需等待服务器回调

内容的提问来源于stack exchange，提问作者Giorgio Calzolato