フォーム入力
ドラッグ&ドロップ アップロード
点線の枠にファイルをドラッグするか、クリック/タップで選択。ファイル名と疑似プログレスバーで進捗を表示する。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
コード（コピーして使えます）
<div class="fu-wrap">
<label class="fu-label">ファイルをアップロード</label>
<div class="fu-zone" id="fu-zone" tabindex="0" role="button" aria-label="ファイルを選択またはドロップ">
<div class="fu-icon" aria-hidden="true">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#2b50c7" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/>
<path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/>
</svg>
</div>
<p class="fu-text">ここにドロップ</p>
<p class="fu-sub">またはタップして選択</p>
<input id="fu-input" class="fu-hidden-input" type="file" aria-hidden="true" tabindex="-1" />
</div>
<div class="fu-result" id="fu-result" hidden>
<p class="fu-filename" id="fu-filename"></p>
<div class="fu-bar-wrap">
<div class="fu-bar" id="fu-bar"></div>
</div>
<p class="fu-status" id="fu-status">アップロード中…</p>
</div>
</div>