- A+
所属分类：Web前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文件上传</title> </head> <body> <form action="http://localhost:61998/file/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <br> <button type="submit">提交</button> </form> </body> <script> let input = document.querySelector("input") // 当文件选择后，出发 input.onchange = evt => { // 获取选择的文件 const file = evt.target.files[0] // 读取文件 const readFile = new FileReader() // 当文件读取完成后执行 readFile.onload = file => { previewImg(file.target.result) } // 读取文件 readFile.readAsDataURL(file) } // 创建预览图片元素 function previewImg(dataSrc) { const img = new Image() img.setAttribute('width', "100px") img.setAttribute('src', dataSrc) document.body.append(img) } </script> </html> 
