技术教程 编程教程 javascript实现图片实时预览的两种方式 正文

javascript实现图片实时预览的两种方式

2023-06-13,,

一、FileReader（base64）：

  1. 代码： 
    <input id="file" type="file">
<img id="img" alt="">
<script>
var file = document.getElementById('file')
var img = document.getElementById('img')
file.addEventListener('change',function(){
    var obj = file.files[0]
    var reader = new FileReader();
    reader.readAsDataURL(obj);
    reader.onloadend = function() {
        img.setAttribute('src',reader.result);
    }
})
</script>
  2. 测试：

    二、window.URL.createObjectURL（blob）：

  3. 代码： 
    <input id="file" type="file">
<img id="img" alt="">
<script>
var file = document.getElementById('file')
var img = document.getElementById('img')
file.addEventListener('change',function(){
    var obj = file.files[0]
    var src = window.URL.createObjectURL(obj)
    img.setAttribute('src',src);
})
</script>
  4. 测试：

《javascript实现图片实时预览的两种方式.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!