上传

点击 / Enter / Space 打开文件选择；拖入高亮，drop 后文件写入 input.files 并派发 change。

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

支持多选，单文件不超过 2GB

<div class="demo-col">  <div class="upload control lift focus-ring" role="button" tabindex="0" aria-label="上传文件">    <input type="file" multiple />    <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">支持多选，单文件不超过 2GB</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();