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

在客戶端預覽圖像

要在上傳之前預覽圖像，您可以利用HTML 的文件輸入和URL.createObjectURL （） 方法。以下是完全在瀏覽器中運行的詳細解決方案：

在HTML 表單中，添加一個允許選擇圖像的輸入字段：

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

接下來，創建一個圖像元素來顯示預覽:

<img>

最後，新增JavaScript，擷取輸入欄位中選定的文件，並使用其內容建立一個物件URL，然後將該物件URL指派給image 元素的 src 屬性：

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

當使用者在輸入欄位中選擇映像時，此程式碼將動態更新 image 元素，顯示所選影像的預覽，而無需將其上傳到伺服器。這種方法可以方便且有效率地在使用者提交上傳之前在客戶端呈現圖像檔案的即時預覽。

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