URL.createObjectURL图片预览
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>图片预览</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <input type="file" id="file" multiple> <script> var oFile = document.querySelector('#file') oFile.onchange = function() { console.log(this.files) // 遍历1 Array.from(this.files).forEach(element => { var img = new Image() img.src = URL.createObjectURL(element) img.style.width = "120px" img.style.height = "90px" document.body.appendChild(img) }) // 遍历2 for(element of this.files) { var img = new Image() img.src = URL.createObjectURL(element) img.style.width = "120px" img.style.height = "90px" document.body.appendChild(img) } } </script> </body> </html>