Html5 圖片上傳和預(yù)覽 New FileReader()的使用
將圖片以base64編碼格式變?yōu)樽址纯欤源藢崿F(xiàn)圖片的預(yù)覽功能
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>上傳圖片顯示縮略圖</title>
</head>
<body>
<form name="uploadForm">
<table>
<tbody>
<tr>
<td><img id="uploadPreview" style="width: 100px; height: 100px;" src="" /></td>
<td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
</tr>
</tbody>
</table>
</form>
<script>
var fileReader = new FileReader();
fileReader.onload = function(event) {
document.getElementById("uploadPreview").src = event.target.result;
}
function loadImageFile() {
var file = document.getElementById("uploadImage").files[0];
if(file) {
fileReader.readAsDataURL(file);
}
}
</script>
</body>
</html>
運行效果示意圖
Paste_Image.png
注意：
IE10以下的版本不支持FileReader()構(gòu)造函數(shù)舷手。
詳情可見api解釋
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
