JavaScript使用FileReader对象实现图片上传预览

最新推荐文章于 2024-05-09 10:51:57 发布

智汇考题

最新推荐文章于 2024-05-09 10:51:57 发布

阅读量621

点赞数

分类专栏： js 文章标签： javascript 上传预览

本文链接：https://blog.csdn.net/kesixin/article/details/78313038

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一个简单的实例，JavaScript实现图片上传预览。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type='file' onchange='openFile(event)'><br>
    <img id='output'>
</body>

<script type="text/javascript">

    var openFile = function(event) {

        //target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
        //IE下,event对象有srcElement属性,但是没有target属性;

        //Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的

        var input = event.target;

        var reader = new FileReader();
        //将文件读取为一段以 data: 开头的字符串
        reader.readAsDataURL(input.files[0]);

        reader.onload = function(){
          var dataURL = this.result;
          var output = document.getElementById('output');
          output.src = dataURL;
        };


  };
</script>
</html>