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

来源：互联网发布：php 类调用静态方法编辑：程序博客网时间：2024/06/05 21:53

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

阅读全文

0 0