在瀏覽器中上傳之前預覽圖像
在Web 開發領域,通常希望為用戶提供圖像的預覽他們在提交上傳過程之前上傳的圖像。此功能可以透過提供視覺反饋並允許他們對想要共享的圖像做出明智的決定來顯著增強用戶體驗。
不使用 Ajax 實作影像預覽
不使用 Ajax 實作影像預覽需要利用檔案 API,它提供基於瀏覽器的介面來與檔案互動。以下步驟概述如何使用此方法實現影像預覽功能:
檔案輸入事件處理程序:
建立物件URL:
將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中文網其他相關文章!