如何在 Web 應用程式中上傳文件之前顯示文件預覽？

上傳前顯示檔案預覽

為了增強上傳檔案時的使用者體驗，通常需要提供影像預覽在上傳過程開始之前。透過利用本機瀏覽器功能，您可以輕鬆實現此目的，而無需訴諸非同步檔案上傳。

要在上傳之前預覽圖像，請按照以下步驟操作：

1. 建立輸入元素：建立一個；接受屬性設定為「image /*”的元素。這允許用戶選擇圖像檔案。
2. 擷取檔案選擇：在 上使用事件偵聽器元素來擷取檔案選擇。選擇檔案時，將觸發事件處理程序。
3. 產生物件 URL：在事件處理程序內，使用 imgInp.files[0] 存取所選檔案。若要顯示圖像，請使用 URL.createObjectURL(file) 產生臨時 URL。
4. 顯示圖片：將產生的 URL 指派給 的 src 屬性。頁面上的元素。這會將圖像呈現為預覽。

以下範例程式碼片段示範如何實現此目的：

const imgInp = document.getElementById("imgInp");

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

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

透過實作此方法，您可以授予使用者能夠在上傳過程之前可視化他們選擇的圖像，從而增強網路應用程式的用戶友好性。

以上是如何在 Web 應用程式中上傳文件之前顯示文件預覽？的詳細內容。更多資訊請關注PHP中文網其他相關文章！