文件

<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);
}