「这是我参与2022首次更文挑战的10天，活动详情查看：2022首次更文挑战」
一、文件操作相关属性
语法：<input type="file" />
文件上传input有两个重要的属性：
- multiple：表示是否可以多选可简写
- accept：用于设置文件的过滤类型（MIME类型）如：image/jpeg image/png image/gif
- 多个过滤类型之间用英文逗号分隔
<!--上传文件后，展示出文件名-->
<input type="file" />
<!--上传多个文件后，展示出文件个数，鼠标指上去后显示出文件名列表-->
<input type="file" multiple>
<!--指定了文件限制后，其他不能上传的文件是置灰无法选择的-->
<input type="file" multiple accept="image/png">
二、美化文件上传元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12-文件操作-美化文件上传元素</title>
<style>
/*
首先使用opacity: 0;将表单设置为透明
再加一个label
虽然使用opacity表单看不见了，但元素还是存在的
*/
.container {
width: 160px;
margin: 0 auto;
}
.filePicker {
position: relative;
width: 160px;
height: 44px;
line-height: 44px;
text-align: center;
color: #ffffff;
background-color: #00b7ee;
}
.filePicker input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 44px;
opacity: 0;
cursor: pointer;
}
</style>
<script>
</script>
</head>
<body>
<!--美化的上传元素-->
<div class="container">
<div class="filePicker">
<label>点击选择文件</label>
<input id="fileInput" type="file" accept="image/*" multiple>
</div>
</div>
</body>
</html>
三、File对象
在文件上传元素中，会产生一个FileList对象，它是一个数组对象，表示所有文件的集合。其中每个文件就是一个File对象，File对象有4个属性：
- name：文件名称
- type：文件类型
- size：文件大小（单位为B）
- lastModifiedDate：文件最后的修改时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13-文件操作-File对象</title>
<script>
window.onload = function () {
let oFile = document.getElementById("file");
oFile.onchange = function() {
let file = oFile.files[0];
let size = file.size / 1024;
let unitArr = ['KB', 'MB', 'GB'];
for(let i=0; size > i; i++) {
var fileSizeString = size.toFixed(2) + unitArr[i];
size /= 1024;
}
console.log('图片大小为：' + fileSizeString);
}
}
</script>
</head>
<body>
<input id="file" type="file" accept="image/*" />
</body>
</html>
四、FileReader对象
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14-文件操作-FileReader对象</title>
<script>
window.onload = function() {
let fileT = document.getElementById("file");
fileT.onchange = function() {
let file = fileT.files[0];
let reader = new FileReader();
reader.readAsText(file, "gbk");
// reader.readAsDataURL(file)
// reader.readAsBinaryString(file);
// reader.readAsArrayBuffer(file);
reader.onload = function() {
console.log(this.result);
}
}
}
</script>
</head>
<body>
<input id="file" type="file">
</body>
</html>
五、在线预览图片
原理：img元素的src属性或者其他元素的background属性的url都可以被赋值为base64编码，readAsDataURL方法会读取指定的Blob或File对象，读取完成时，readySate会变成已完成DONE，并触发loadend事件，同时result属性将包含一个dataURL格式的字符串：base64编码，以表示所读取文件的内容。浏览器会自动解析base64编码以展现其内容。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15-文件操作-在线预览图片</title>
<script>
window.onload = function() {
let fileTool = document.getElementById("file");
fileTool.onchange = function() {
let file = fileTool.files[0];
// 将图片转为Base64格式
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
let oImg = document.createElement("img");
oImg.src = this.result;
document.body.appendChild(oImg);
}
}
}
</script>
</head>
<body>
<input id="file" type="file" accept="image/*">
</body>
</html>
六、拖拽文件并读取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>16-文件操作-拖拽文件并读取</title>
<style>
#box {
width: 150px;
height: 150px;
border: 1px solid silver;
}
</style>
<script>
window.onload = function() {
let oBox = document.getElementById("box");
let oP = document.getElementById("content");
oBox.ondragover = function(e) {
e.preventDefault();
}
oBox.ondrop = function(e) {
e.preventDefault(); // 阻止默认行为，不然拖拽完毕会新弹出一个窗口展示文件内容
let file = e.dataTransfer.files[0];
let reader = new FileReader();
reader.readAsText(file, "gbk");
reader.onload = function() {
oP.innerHTML = this.result;
}
}
}
</script>
</head>
<body>
<div id="box"></div>
<p id="content"></p>
</body>
</html>
七、拖拽文件并预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>17-文件操作-拖拽图片并预览</title>
<style>
#box {
width: 150px;
height: 150px;
border: 1px solid silver;
}
</style>
<script>
window.onload = function() {
let oBox = document.getElementById("box");
oBox.ondragover = function(e) {
e.preventDefault();
}
oBox.ondrop = function(e) {
e.preventDefault(); // 阻止默认行为，不然会新打开一个窗口来展示图片
let file = e.dataTransfer.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
let oImg = document.createElement("img");
oImg.src = this.result;
oImg.style.width="150px";
oImg.style.height="150px";
oBox.appendChild(oImg);
}
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
八、Blob对象
Blob对象用于代表原始二进制数据，File对象也继承于Blob对象
- 语法：var blob = new Blob(dataArray, type)
- 参数：
- Blob这两个参数均是可选的
-
参数一是一个数组，数组中的元素可以是以下类型的对象：
- String对象
- Blob对象
- ArrayBuffer对象
- ArrayBufferView对象
-
参数二是一个字符串，表示Blob对象的MIME类型
-
- Blob这两个参数均是可选的
- Blob对象可通过window.URL对象的createObjectURL()方法生成一个网络地址，从而结合a标签来实现下载文件的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>18-文件操作-Blob对象</title>
<script>
window.onload = function() {
let oTxt = document.getElementById('txt');
let btn = document.getElementById("btn");
btn.onclick = function() {
let text = oTxt.value;
let blob = new Blob([text], {type: 'text/plain'});
let oA = document.createElement("a");
// Blob对象可以通过window.URL 对象的createObjectURL()方法生成一个网络地址
// 结合a标签来实现下载文件的功能
let url = window.URL.createObjectURL(blob);
oA.href = url;
oA.download = "我是文件名";
document.body.appendChild(oA);
// 触发点击，下载
oA.click();
document.body.removeChild(oA);
}
}
</script>
</head>
<body>
<textarea id="txt" cols="30" rows="10"></textarea>
<input id="btn" type="button" value="下载文件" />
</body>
</html>
