javascript 内置方法 new FileReader 读取文件


示例代码:

<!-- multiple 代表选择文件可以多选 -->
<input type="file" name="cover" id="file" multiple>
<div class="thumbnail-waper">
<img class="img-thumbnail" src="" id="fileImg">
</div>

<script type="text/javascript">
  // 获取选择文件的控件
  var file = document.querySelector('#file')
  // 获取显示图片的控件
  var fileImg = doucument.querySelector('#fileImg')
  // 选择文件
  file.onchange = funciton(){
    // 创建读取文件内置对象
    const reader = new FileReader()
    // 读取文件(这是一个异步方法,所以得需要onload中result.reader获取),this.files代表上传文件列表数据
    reader.readAsDataURL(this.files[0])
    reader.onload = funciton(){
      // 文件赋值给显示图片控件
      fileImg.src = result.reader
    }
  }
</script>



免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM