首頁 > web前端 > js教程 > 如何在上傳前在客戶端預覽圖片?

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

DDD
發布: 2024-12-24 07:56:22
原創
649 人瀏覽過

How Can I Preview an Image Client-Side Before Uploading?

在客戶端預覽圖像

要在上傳之前預覽圖像,您可以利用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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板