一個(gè)簡(jiǎn)單的實(shí)例甜紫，JavaScript實(shí)現(xiàn)圖片上傳預(yù)覽这揣。
代碼如下：
<!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 事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)）霜瘪，如生成事件的元素哺哼、文檔或窗口函喉。
//IE下,event對(duì)象有srcElement屬性,但是沒(méi)有target屬性;
//Firefox下,event對(duì)象有target屬性,但是沒(méi)有srcElement屬性.但他們的作用是相當(dāng)?shù)?
var input = event.target;
var reader = new FileReader();
//將文件讀取為一段以 data: 開(kāi)頭的字符串
reader.readAsDataURL(input.files[0]);
reader.onload = function(){
var dataURL = this.result;
var output = document.getElementById('output');
output.src = dataURL;
};
};
</script>
</html>
查看原文>> 曼巴童鞋 - 博客 - JavaScript使用FileReader對(duì)象實(shí)現(xiàn)圖片上傳預(yù)覽
