<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div_img{
width: 200px;
height: 200px;
border:1px solid red;
}
.poto{
width: 200px;
height: 200px;
}
#tt{
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
//选择上传文件时调用的函数
function fileUpload_PrevImageFile(f) {
//检测浏览器是否支持FileReader对象
if (typeof FileReader == 'undefined') {
alert("检测到您的浏览器不支持FileReader对象！");
}
var strHTML = "";
for (var intI = 0; intI < f.length; intI++) {
var tmpFile = f[intI];
var reader = new FileReader();
reader.readAsDataURL(tmpFile);
reader.onload = function(e) {
strHTML = strHTML + "<span>";
strHTML = strHTML + "<img id='tt' src='" + e.target.result + "' alt=''/>";
strHTML = strHTML + "</span>";
$$("div_img").innerHTML = strHTML;
}
}
}
</script>
</head>
<body>
<input type="file" id="btn" onChange="fileUpload_PrevImageFile(this.files);"/ >
<div id="div_img">
</div>
</body>
</html>
看了陶国荣的HTMl5实战自己改写的代码
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
