原生js实现图片文件上传

最新推荐文章于 2024-06-04 17:35:28 发布

龙骑士-黎明

最新推荐文章于 2024-06-04 17:35:28 发布

阅读量1.4k

点赞数

分类专栏：前端开发常规问题及其解决方案文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55940198/article/details/127005640

版权

前端开发常规问题及其解决方案专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>01图片上传及回显</title>
</head>
<body>
  <div class="upload-cont">
    <input id="imgUploader" type="file" placeholder="点击上传" onchange="uploadImg(event)" value="">
  </div>
</body>
<script language="javaScript">
  const imgUploader = document.querySelector("#imgUploader")
  const uploadCont = document.querySelector(".upload-cont")

  // 文件上传分为三步:文件获取、文件上传、图片回显
  function uploadImg(event) {
    let file = getFile(event)
    console.log('file',file)
    if(file) {
      post('',file,{header: {'content-type': 'multipart/form-data'}}).then(res=>{
        console.log('res',res)
      })
    }
  }

  function getFile(event) { //获取文件
    console.log('imgUploader', imgUploader.value)
    console.log('event',event)
    const file = event.target.files[0]
    const imgTypes = ['jpg','png','jpeg']
    let index = file.name.indexOf('.')
    let fileType = file.name.substring(index+1)
    let fileTypeFlag = true,fileSizeFlag = true
    if (!imgTypes.includes(fileType)) {
      alert('只能上传xxx格式图片')
      fileTypeFlag = false
      return false
    }
    if(file.size/1024/1024>10) {
      alert('图片不能大于10M')
      fileSizeFlag = false
      return false
    }
    if(fileTypeFlag&&fileSizeFlag) {
      const formData = new FormData()
      formData.append('file',file)
      const fileReader = new FileReader()
      fileReader.onload = function() {
        formData.append('file',file)
        console.log('result',fileReader.result)
        // let div = document.createElement('div')
        // let nodeStr = "<img src='' alt='图片加载错误' title='图片' style='width:80px;height:80px;'><p>123</p></img>"
        // new DOMParser().parseFromString(nodeStr,'text/html')
        // div.innerHtml = nodeStr
        // console.log('div',div)
        // uploadCont.appendChild(div)
        // console.log('uploadCont',uploadCont)
      }
      
      fileReader.readAsDataURL(file)
      return formData
    }
    imgUploader.value = ''
  }

  function post(url,param,requestOptions={}) { //封装post方法
    const request = {
      header: {
        'content-type': 'application/json'
      },
      method: 'POST',
      body: param,
      credentials: 'same-origin'
    }
    const requestSet = Object.assign(request,requestOptions)
    return fetch(`http:\\localhost:8080${url}`,requestSet)
  }


</script>
<style></style>
</html>