1效果图
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
img{
width: 400px;
}
</style>
</head>
<body>
<button type="" id="btn">上传文件</button>
<!-- //隐藏默认的，，，，，选择多个 -->
<input id="fileup" type="file" style="display: none;" multiple>
<script type="text/javascript">
btn.onclick = function(){
fileup.click();
}
//发生改变时调用
fileup.onchange = function(){
//循环遍历可以多选
$.each($(fileup.files), function(index, val) {
var reader = new FileReader();
//该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
reader.readAsDataURL(val);
reader.onload = function(){
//文件地址
console.log(this.result);
//创建img节点
var img = document.createElement('img');
// var img = new Image();
img.src = this.result;
//向body中插入img
document.body.append(img);
console.log(val);
//打印输出其他信息
document.body.innerHTML+=val.name;
document.body.innerHTML+=val.lastModifiedDate;
document.body.innerHTML+=(val.size/1024).toFixed(1)+'K';
}
});
}
</script>
</body>
</html>4.如有问题联系作者
844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
