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

一个简单的实例，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>

<br>

Mamba Blog

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

评论 3

发表评论

点击排行

标签云

友情链接