HTML5之FileReader的使用
http://blog.csdn.net/jackfrued/article/details/8967667
MDN : 代码
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
oFReader.onload = function (oFREvent) {
debugger
document.getElementById("uploadPreview").src = oFREvent.target.result;
<!-- 读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读. -->
};
function loadImageFile() {
if (document.getElementById("uploadImage").files.length === 0) { return; }
var oFile = document.getElementById("uploadImage").files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
debugger
oFReader.readAsDataURL(oFile);
// 该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
}
</script>
</head>
<body onload="loadImageFile();">
<form name="uploadForm">
<table>
<tbody>
<tr>
<td>
<img id="uploadPreview" style=" 100px; height: 100px;" src=""
alt="Image preview" />
</td>
<td>
<input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" />
</td>
</tr>
</tbody>
</table>
<p>
<input type="submit" value="Send" />
</p>
</form>
</body>
</html>
MDN 详解
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader