如何實現客戶端圖片上傳前預覽？

上傳前展示圖像預覽

上傳前預覽圖像可以讓用戶一窺他們想要分享的內容，從而增強用戶體驗。完全在瀏覽器中執行此預覽，無需 Ajax 請求，確保流程無縫且有效率。

實作映像預覽功能

要實現映像預覽功能，請利用 FileReader API 和 URL.createObjectURL() 方法的功能。這種方法可讓您將選定的影像檔案作為URL 載入並將其顯示在影像元素中，如下所示：

imgInp.onchange = evt => {
  const [file] = imgInp.files;
  if (file) {
    blah.src = URL.createObjectURL(file);
  }
};

<form runat="server">
  <input accept="image/*" type='file'>

此程式碼從輸入欄位(imgInp) 擷取影像文件並使用URL.createObjectURL(file) 建構一個表示圖片內容的URL。隨後，圖像元素 (blah) 被分配此 URL，將所選圖像顯示為預覽。

以上是如何實現客戶端圖片上傳前預覽？的詳細內容。更多資訊請關注PHP中文網其他相關文章！