使用js實現預覽上傳的圖片

首先，要有一個文件上傳控件：

<inputtype="file"accept="image/*" />

type="file" 設置input為文件上傳控件
accept="image/*" 限制文件類型為圖片

接下來，給 input 綁定監聽事件

let input = document.getElementsByTagName('input')[0]input.addEventListener('change', function () {console.log('ok')})

當上傳圖片的時候就會觸發監聽事件，控制臺打印ok。

然后我們可以通過 input 元素的files屬性拿到一個 對象，這個對象是一個類似數組的對象，代表一組選中的文件，每個成員都是一個 File 實例。
修改 input 的監聽函數：

input.addEventListener('change', function () {const { files } = thisconsole.log(files) })

效果：

然后我們取出files的第一個對象，通過URL.createObjectURL()方法用來為上傳/下載的文件、流媒體文件生成一個 URL 字符串。這個字符串代表了File對象或Blob對象的 URL

input.addEventListener('change', function () {const { files } = thisconst f = files[0]console.log(URL.createObjectURL(f)) })

接下來我們創建一個 img 標簽，并且將它的src設置為這個URL路徑，然后再將 img 添加到頁面

input.addEventListener('change', function () {const { files } = thisconst f = files[0]const img = document.createElement('img')img.src = URL.createObjectURL(f)img.style.width = '100px'document.body.append(img) })

總結

以上是生活随笔為你收集整理的使用js实现预览上传的图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。