如何在不使用 Ajax 的情況下在瀏覽器中預覽圖片上傳前？

在瀏覽器中上傳之前預覽圖像

在Web 開發領域，通常希望為用戶提供圖像的預覽他們在提交上傳過程之前上傳的圖像。此功能可以透過提供視覺反饋並允許他們對想要共享的圖像做出明智的決定來顯著增強用戶體驗。

不使用 Ajax 實作影像預覽

不使用 Ajax 實作影像預覽需要利用檔案 API，它提供基於瀏覽器的介面來與檔案互動。以下步驟概述如何使用此方法實現影像預覽功能：

1. 檔案輸入事件處理程序：

   • 新增事件檔案輸入元素的偵聽器，該元素在檔案開啟時觸發函數

2. 建立物件URL：

   • 在事件處理程序中，使用URL.createObjectURL() 方法建立代表所選內容的URL

3. 將URL指派給影像來源：

   • 擷取 將顯示預覽的元素。
   • 設定 的 src 屬性元素加入步驟 2 中建立的 URL。

範例程式碼：

以下程式碼範例了上述步驟：

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

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

以下程式碼範例了上述步驟：

以上是如何在不使用 Ajax 的情況下在瀏覽器中預覽圖片上傳前？的詳細內容。更多資訊請關注PHP中文網其他相關文章！