点击或拖拽文件到此处上传
支持图片 / PDF / DOC，单个 ≤ 5 MB，最多 6 个
<div class="demo-col"> <div class="icen-upload" data-icen-upload-list data-icen-max-size="5242880" data-icen-max-files="6" role="group" aria-label="上传文件" style="width:100%;max-width:480px"> <div class="icen-upload-dropzone icen-control icen-lift icen-focus-ring" role="button" tabindex="0" aria-label="拖放或点击选择文件"> <input type="file" multiple accept="image/*,.pdf,.doc,.docx" /> <div class="icen-upload-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M10 4v12M4 10h12"></path></svg></div> <p class="icen-upload-title">点击或拖拽文件到此处上传</p> <p class="icen-upload-desc">支持图片 / PDF / DOC，单个 ≤ 5 MB，最多 6 个</p> <p class="icen-upload-error" id="demo-upload-files" hidden></p> </div> </div></div>特性
- 触发：点击 / Enter / Space 打开文件选择；拖入高亮，drop 写入
input.files并派发 change - 列表：
data-icen-upload-list自动渲染——图片缩略图、大小格式化、单文件移除 - 校验：
accept/data-icen-max-size/data-icen-max-files，失败派icen:upload-error - 事件：
icen:upload { files }/icen:upload-error { file, reason }/icen:upload-remove { file }
列表是 dropzone 的兄弟节点，不与可点区域嵌套；initUpload() 返回销毁函数，摘监听、回收缩略图 URL、移除生成列表。
接口
- 初始化
initUpload()（kit 一行入口可直接命名导入）- 导出
-
initUpload - 事件
-
icen:uploadicen:upload-erroricen:upload-removedetail 契约见IcenEventMap - 类型
dist/behaviors/upload.d.mts（随 npm 包发布，含全部 JSDoc 约束）
安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initUpload } from '@icen.ai/ui/kit/upload';initUpload();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add upload
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/upload.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { initUpload } from '@icen.ai/ui/behaviors/upload';initUpload();<!-- 基础上传（无列表） --><div class="icen-upload" role="button" tabindex="0"> <input type="file" multiple /> …</div><!-- 增强上传（文件列表 + 校验）：列表是 dropzone 的兄弟，不与可点区域嵌套 --><div class="icen-upload" data-icen-upload-list data-icen-max-size="5242880" data-icen-max-files="6" role="group" aria-label="上传文件"> <div class="icen-upload-dropzone" role="button" tabindex="0"> <input type="file" multiple accept="image/*,.pdf" /> … </div></div><!-- 事件：icen:upload { files } / icen:upload-error { file, reason } / icen:upload-remove { file } --><!-- const dispose = initUpload(); 返回销毁函数：摘监听、回收缩略图 URL、移除生成列表 -->