FileReader.readAsDataURL(File对象)方法,可将File转位base64格式。img元素的src属性、其他元素的background属性都能被赋值为base64格式,这样可以不经过后台而直接将本地图片显示在页面中,减少前后端的频繁交互,减少服务器端的压力。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>
window.onload = function () {
var oFile = document.getElementById("file");
oFile.onchange = function(){
//获取第1个文件
var file = oFile.files[0];
//将图片转换为Base64格式
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
//添加图片到页面中
var oImg = document.createElement("img");
oImg.src = this.result;
document.body.appendChild(oImg);
};
};
}
</script>
</head>
<body>
<input id="file" type="file" /><br/>
</body>
</html>