JavaScript文件类
Posted shoucong li
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript文件类相关的知识，希望对你有一定的参考价值。
<!--
* @Author: your name
* @Date: 2021-05-12 10:52:11
* @LastEditTime: 2021-05-12 11:13:04
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \\ruanjiankaifa\\lx5\\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.fff{
display:none
}
.box{
width: 100%;
height: 200px;
background-color: #f00;
}
</style>
<form>
<ul>
<li>
<label for="file1" id ="abc" >上传图片</label>
<input type="file" multiple id="file1" name="file1" class="fff">
</li>
</ul>
<div id="box" class="box"></div>
</form>
<script>
var f=document.getElementById("file1")
var box=document.getElementById("box")
f.onchange=(e)=>{
let f1=e.target.files[0]
console.log(f1)
let freader=new FileReader()
freader.readAsDataURL(f1)
freader.onload=(e)=>{
let r=e.target.result
let img1=document.createElement("img")
img1.src=r
box.appendChild(img1)
img1.addEventListener("click",function(){
box.removeChild(img1)
})
}
}
</script>
</body>
</html>
以上是关于JavaScript文件类的主要内容，如果未能解决你的问题，请参考以下文章