前端如何读取和下载文件？

参考：前端文件操作那些事

1、前端读取json文件

原理：利用文件上传对话框预览本地文件、利用FileReader读取文件
首先通过input上传json文件，再通过FileReader解析文件

<!--html代码-->
<input tabindex="-1" id="select_range" data-input="false" class="font-small" type="file">

<!--javascript代码-->
$('#select_range').change(function(evt){
    var files = evt.target.files,
     reader = new FileReader();
      reader.onload = function(){
          var range='XXXXXXXXXX';
      };
    reader.readAsText(files[0]);
    });

2、前端生成并下载json文件

原理：生成blob文件，利用URL.createObjectURL（注意兼容性），生成下载链接，利用a标签的download属性下载

<!--html代码-->
<a href="javascript:void(0)" id="aa">保存</a>

<!--javascript代码-->
var funDownload = function (content, filename) {
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};
button.addEventListener('click', function () {
    funDownload(textarea.value, 'test.html');   
});

3、Plupload上传文件插件

支持分片上传
http://www.cnblogs.com/2050/p/3913184.html#plupload_doc2

4、文件过滤

• 根据文件类型（img/gif/bin）过滤
• 限制文件大小过滤

• 获取文件大小，根据计算规则过滤。例如：

  let arrLaw = files.filter(item => {
  return (item.size-24)%(971234*45) === 0
  })