如何使用 HTML5 在上傳之前預覽圖像？

上傳前預覽圖像

在 Web 開發中，在用戶提交圖像之前為用戶提供圖像預覽可能會很有幫助。這允許用戶在上傳之前確保圖像正確，從而潛在地減少錯誤和返工的數量。

解決方案：HTML5 檔案介面

幸運的是，HTML5檔案介面提供了一種在瀏覽器中預覽影像的簡單方法，無需發出伺服器請求或使用Ajax。其工作原理如下：

1.建立圖片元素

建立 HTML 帶有 id 的元素（例如 blah）來顯示圖片預覽。

2.從輸入取得檔案

將 onchange 事件處理程序新增至檔案輸入元素。選擇檔案後，事件處理程序會從輸入元素中提取所選檔案。

3.使用檔案介面

使用 URL.createObjectURL() 方法為所選檔案建立物件 URL。這將建立一個臨時 URL，允許瀏覽器顯示圖像。

4.更新圖片來源

設定的src屬性元素到物件 URL。這將顯示所選影像的預覽。

範例程式碼

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

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

以上是如何使用 HTML5 在上傳之前預覽圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！