<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.file {
width: 75px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: green;
position: relative;
color: #fff;
}
.file input {
width: 75px;
height: 25px;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
left: 0;
top: 0;
}
#dd{
width: 300px;
height: 300px;
}
#dd img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<form action="" name="file" class="file">
上传文件
<input type="file" id="img" name="img">
</form>
<div id="dd"></div>
<script>
var file = document.getElementById("img");
file.onchange = function() { // 文本框内容改变时触发
var files = this.files; // 获取文件的数量
for(var i = 0; i < files.length; i++) {
readers(files[i]);
}
}
function readers(fil) {
console.log(fil);
var reader = new FileReader(); // 异步读取存储在用户计算机上的文件
reader.readAsDataURL(fil); // 开始读取指定的Blob对象或File对象中的内容
reader.onload = function() {
document.getElementById("dd").innerHTML += "<img src='" + reader.result + "'>"; // 添加图片到指定容器中
console.log(reader.result);
};
}
</script>
</body>
</html>
10-13
235
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
