JavaScript实现文件上传demo

  • JavaScript实现文件上传demo已关闭评论
  • 172 次浏览
  • 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>