<input type="file">
和File结合使用的对象
-FileList 通过input元素的files获得,multiple可获得多个文件
<input type="file" id="file" multiple>
在Web应用中使用File
1.限制文件的类型、大小、数量
<input type="file" id="file" accept="image/*">
//accpet接收mime类型,多个值用逗号分隔,比如“image/png, image/jpeg” 也可以写文件后缀名,比如“.png, .jpg, .jpeg”,也支持通配符“*”。
限制文件的大小、数量
<input type="file" id="file" multiple>
var fileInput = document.querySelector('#file');
fileInput.addEventListener('change', e => {
const files = e.target.files;
if (files.length >3 ) {
alert('每次最多只能选择3张图片');
//清空选择
fileInput.value = '';
return;
}
const exceedSizeFiles = [].slice.call(files).filter(file =>{
return file.size >10*1024;
});
if (exceedSizeFiles.length) {
alert('文件最大为10KB');
}
});
[].slice.call(files):files转换成数组
2.文件按钮的样式美化技巧
--方法1:隐藏input
<input type = "file" id = "file" multiple style="display: none;">
<button id = "custom-btm">选择文件</button>
let fileInput = document.querySelector('#file');
fileInput.addEventListener('change', e => {
//监听选择文件按钮的change时间的逻辑保持不变
});
let customBtn = document.querySelector('#custom-btn');
customBtn.addEventListener('click', e=> {
fileInput.click();
})
--方法2:利用label和input的关联
<input type = "file" id = "file" multiple style="display:none;">
<label for="file" style="border:1px solid #ccc;">选择文件</label>
let fileInput = document.querySelector('#file');
fileInput.addEventListener('change', e => {
//监听选择文件按钮的change时间的逻辑保持不变
});
3.将文本内容显示到网页上
<div id="text"></div>
<input type="file" id="file" accept=".txt">
let fileInput = document.querySelector('#file');
fileInput.addEventListener('change', e => {
readFile(e.target.files[0]);
});
function readFile(file) {
const fr = new FileReader();
fr.onload = e => {
document.querySelector('#text').innerHTML = e.target.result;
};
//fr.addEventListener('load', e => {
// document.querySelector('#text').innerHTML = e.target.result;
// });
fr.readAsText(file);
}
4.将页面上的目标文本下载到本地
<textarea id="textbox">在此处输入内容</textarea>
<button id="create">创建文件</button>
<a download="info.txt" id="downloadlink" style="display:none">下载</a>
let textFile = null;
const makeTextFileUrl = function (text) {
const data = new Blob([text], {type:'text/plain'});
if (textFile !== null) {
window.URL.revokeObjectURL(data);
}
textFile = window.URL.createObjectURL(data);
return textFile;
};
const create = document.getElementById('create');
const textbox = document.getElementById('textbox');
create.addEventListener('click', fuction() {
const fileURL = makeTextFileUrl(textbox.value);
const link = document.getElementById('downloadlink');
link.href = fileUrl;
link.click();
}, false);
5.1本地预览图片:FileReader.readAsDataURL
<input type="file" id="file" accept="image/*">
const fileInput = document.querySelector('#file');
fileInput.addEventListener('change' e => {
showImage(e.target.files[0]);
});
function showImage(image) {
const fr = new FileReader();
fr.onload = e => {
const img = new Image();
img.src = e.target.result;
document.body.appendChild(img);
};
fr.readAsDataURL(image);
}
5.2本地预览图片:URL.createObjectURL#创建一个临时地址
<input type="file" id="file" accept="image/*">
const fileInput = document.querySelector('#file');
fileInput.addEventListener('change' e => {
showImage(e.target.files[0]);
});
let imgFile = null;
const makeImgFileUrl = function (file) {
if (imgFile !==null){
window.URL.revokeObjectURL(imgFile); //删除原有临时地址
}
imgFile = window.URL.createObjectURL(file);
return imgFile;
};
function showImage(image) {
const img = new Image();
img.src = makeImgFileUrl(image);
document.body.appendChild(img);
}
网友评论