<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="upload" style="width: 100px;height: 100px;border: 1px dashed #ccc;border-radius: 5px;">
<input id="file" type="file" style="width: 100%;height: 100%;position: relative;opacity: 0;z-index: 99;">
<i style="position: relative;left:41px;top:-62px;font-size: 24px;color:#ccc;">+</i>
</div>
<img src="" id="img">
</body>
</html>
<script>
var file = document.getElementById("file");
file.addEventListener("change",function(){
// 通过html5提供的FileReader读取到文件中的数据
// 并新建一个FileReader实例
var render = new FileReader();
// 读取文件内容，结果用data:url的字符串形式表示
var result = render.readAsDataURL(file.files[0]);
// var result = file.files[0]
// 读取成功执行操作
render.onload=function(){
// console.log(file.files[0].lastModifiedDate)
console.log(this.result)
// document.getElementById("img").src=this.result;
// 将上传的图片添加到元素后面
var img = document.createElement("img");
img.src=this.result;
img.style.width='100px'
img.style.height='100px'
img.style.margin="5px"
img.style.border="1px solid #ccc"
img.style.borderRadius="5px"
document.body.appendChild(img)
}
})
</script>
1248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
