📷 带图像预览的文件上传

👇 示例效果如下 👇

👀 演示


<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault()">
  <p>请选择一张图片：</p>
  <input type="file" accept="image/*" onchange="previewImage(event)">
  <div style="margin-top: 1em;">
    <img id="imagePreview" src="#" alt="图片预览" style="display:none; max-width:100%;">
  </div>
  <button type="submit" style="margin-top: 1em;">📤 提交</button>
</form>

<script>
function previewImage(event) {
  const img = document.getElementById("imagePreview");
  img.src = URL.createObjectURL(event.target.files[0]);
  img.style.display = "block";
}
</script>

📌 表单属性的含义与用法

① action="upload.php"
当表单被提交时，指定要发送数据的目标 URL。

<form action="upload.php" ...>

补充说明： 你可以编写自己的 upload.php 用于将图片保存到服务器，或指定外部服务（例如 Amazon S3,Google Drive API 等）作为目标 URL。

② enctype="multipart/form-data"
用于指定表单在上传图片等二进制数据时的编码格式。

<form enctype="multipart/form-data" ...>

如果不设置： 图片等文件将无法被服务器正确接收（可能为空或无效）。

③ onsubmit="event.preventDefault()"
用于阻止表单真正提交到服务器，适合用于演示或预览场景。

<form onsubmit="event.preventDefault()" ...>

实际开发中： 若需要真正提交表单，应删除 onsubmit 或在 JavaScript 中通过 form.submit() 明确调用提交。

🧪 示例汇总（完整写法）

<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault()">

✅ 此模板的用途与优势

选择图片后立即显示预览
为用户提供直观的操作体验
易于集成到上传界面中
适用于作品集或产品图片上传
JS 初学者也能轻松理解的结构

🧩 應用與活用方式

預覽圖片上傳功能常見於購物網站或個人資料註冊頁，能夠提升使用者體驗，並減少選錯圖片的風險。

本模板利用 URL.createObjectURL() 方法，將使用者選取的圖像檔案轉換為暫時的 URL，讓圖片可立即顯示於畫面上，無需先上傳至伺服器。

此外，透過 img.style.display = "block" 控制預覽圖片的顯示狀態，使其僅在選擇檔案後才會出現，避免空白畫面。

若需加入檔案格式或大小的檢查，也可透過 event.target.files[0].type 及 .size 屬性來進行驗證與條件判斷。

掌握這些基礎後，也可進一步擴展成多圖預覽功能，甚至加入拖曳上傳等進階互動介面。