原生js上传图片,预览图片_米醋屋个人技术博客

之前写上传都需要用别人的框架，是因为自己不会写js的上传个预览，这次特地百度并且自行尝试了一下，写下此图片预览和上传的demo留作备用。主要使用了js的`FileReader`和`FormData`对象，一个用来获取base64的流进行预览，另一个用来上传file，具体逻辑大家可以查看下列代码
```
<!DOCTYPE html>    
<html>    
<head>    
<meta charset="UTF-8">    
<title>micuer - 图片选择/预览/上传</title>

</head>    
    <body>  
    
        <div class="container">

document.getElementById('file_input').addEventListener('change', function(e) {
          //1.可以通过this拿到这个file的DOM元素
          console.log(this)
          //1.  e 函数事件参数对象中也有这个file的DOM元素对象。使用e.target也可以直接拿到
          console.log(e.target)
          //对开发人员屏蔽，所以直接 必须调用这个文件的DOM对象的files属性，返回一个数组
          let files = e.target.files
          console.log(files)
          // console.log(files.item(0))
          console.log(files[0])

//预览 ----- 此处只判断了 第一张图 - 后续逻辑需要大家自行优化
          if (files[0]) {
            // 创建流对象
            reader = new FileReader()
            reader.readAsDataURL(files[0])
          }
          reader.onload = function(e) {
            // 转换后的base64就在e.target.result里面,直接放到img标签的src属性即可
            document.querySelector('img').src = e.target.result
          }
          //预览结束 -----

// 判断一手是否有文件
          if (!files.length) return
          // 上传文件 创建FormData
          let formData = new FormData()

// upFile就是后台接收的key
          formData.append('upFile', files[0], files[0].name)
          // 将formdata发送到后台即可
          // 我用的 axios.post('url', formData) 或者 $.post(url,formData)
        })
    </script>
</html>
```
[![](https://micuu.com/data/avatar/20211013/9621bd33f76e4546ac341ee191e664fe.png)](https://micuu.com/data/avatar/20211013/9621bd33f76e4546ac341ee191e664fe.png)

注:原创不易,转载请注明出处( https://micuu.com/new/2225.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。