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