如何用HTML 5中的文件API实现图片选择预览效果，如图所示。
1 回答
UYOU
TA贡献1878条经验 获得超4个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择图片预览示例</title>
</head>
<body>
<div><input id="viewFiles" type="file"/></div>
<img id="viewImg" src="" style="max-width:500px"/>
<script type="text/javascript">
(function () {
var viewFiles = document.getElementById("viewFiles");
var viewImg = document.getElementById("viewImg");
function viewFile (file) {
//通过file.size可以取得图片大小
var reader = new FileReader();
reader.onload = function( evt ){
viewImg.src = evt.target.result;
}
reader.readAsDataURL(file);
}
viewFiles.addEventListener("change", function () {
//通过 this.files 取到 FileList
viewFile(this.files[0]);
}, false);
})();
</script>
</body>
</html>
- 1 回答
- 0 关注
- 865 浏览
添加回答
举报
0/150
提交
取消