上传

点击 / Enter / Space 打开文件选择；拖入高亮，drop 后文件写入 input.files 并派发 change。增强（data-upload-list）：自动渲染文件列表，图片缩略图、大小格式化、单文件移除、accept/max-size/max-files 校验。

点击或拖拽文件到此处上传

支持图片 / PDF / DOC，单个 ≤ 5 MB，最多 6 个

<div class="demo-col">  <div class="upload control lift focus-ring" data-upload-list data-max-size="5242880" data-max-files="6" role="button" tabindex="0" aria-label="上传文件" style="max-width:480px">    <input type="file" multiple accept="image/*,.pdf,.doc,.docx" />    <div class="upload-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></div>    <p class="upload-title">点击或拖拽文件到此处上传</p>    <p class="upload-desc">支持图片 / PDF / DOC，单个 ≤ 5 MB，最多 6 个</p>    <p class="upload-error" id="demo-upload-files" hidden></p>  </div></div>

安装

bun add @icen.ai/ui

pnpm add @icen.ai/ui

npm install @icen.ai/ui

yarn 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="upload" role="button" tabindex="0">  <input type="file" multiple />  …</div> <!-- 增强上传（文件列表 + 校验） --><div class="upload" data-upload-list data-max-size="5242880" data-max-files="6"     role="button" tabindex="0">  <input type="file" multiple accept="image/*,.pdf" />  …</div><!-- 事件：icen:upload { files } / icen:upload-error { file, reason } / icen:upload-remove { file } -->