救急，非IE浏览器实现Javascript对文件上传与下载操作

最新推荐文章于 2019-07-05 15:35:59 发布

无命可取

最新推荐文章于 2019-07-05 15:35:59 发布

阅读量1.9k

点赞数 3

分类专栏： web前端文章标签： javascript chrome file download upload

本文链接：https://blog.csdn.net/nh18304030935/article/details/70840955

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前几天遇到的问题，查了好多资料，大部分技术都是针对IE浏览器的，用的是ActiveXObject实现。但是本人就想用chrome浏览器实现，肿么办？

查了些资料，发现H5新增了一些功能能帮助我们解决这些问题。在这里就不描述IE浏览器如何实现了，网上一搜一堆，这里只帮助那些使用chrome的小伙伴解决问题，请叫我雷锋，不谢！！

JS下载文件：

使用技术：

1.Blob对象，

2.<a>标签的download属性，

3.URL.createObjectURL()方法,

具体实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script>
      var info = {
        "title": "",
        "name": "",
        "id": "",
        "content": "",
        "url": ""
      }		
      function downloadFile(fileName,content){
        var aLink=document.createElement("a"),  //新建a标签，用H5中a标签的download属性实现文件的下载功能
            /*
             * 创建Blob对象（binary large object二进制大对象），用于存储二进制文件字段类型，
             * 第一个参数为传入的数据（数组形式），第二个参数为数据类型（JSON形式）
             */
            blob=new Blob([content],{type:"txt/json"}),  
            e=document.createEvent("HTMLEvents");  //创建自定义的事件
            e.initEvent("click",false,false);  //初始化事件，一参初始化事件类型，二参是否事件冒泡，三参是否阻止默认事件
            aLink.download=fileName;  //设置下载文件的文件名
            /*
             *设置下载的文件url地址，用URL的createObjectURL方法创建blob对象的url地址
             * 用于下载访问blob内容。
             */
            aLink.href=URL.createObjectURL(blob);
            aLink.dispatchEvent(e);  //把自定义的事件分发绑定给新建的a标签，给a标签绑定事件
            aLink.click();  //运行a标签的点击事件，进行文件的下载
      }
      downloadFile("info.json",JSON.stringify(info));
    </script>
  </body>
</html>

当然，文件的名称可以改成自己的.txt形式。

JS上传文件：

使用技术：

1.FileReader API，

2. <input type="file">

FileReader为H5的API，实现对本地文件的读取功能。把file或blob对象写入内存。
FileReader有4个方法，6个事件。

方法
方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file，[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	中断读取操作

事件
事件名	描述（事件都没有返回值，结果放在result属性中）
onabort	中断
onerror	出错
onloadstart	开始读取
onprogress	正在读取
onload	成功读取
onloadend	读取完成

具体实现：

HTML：

<input type='file' id='file'>

JS：

var f=document.getElementById("file");
f.οnchange=function(ev){
  var obj =window.event||ev; //兼容浏览器
  var files=obj.target.files;
  if(files.length>0){
    var file=files[0]; //取得导入的第一个文件
    var reader=new FileReader(); //创建FileReader对象
    reader.readAsText(file,"gbk"); //设置读取方式为Text，字符编码为GBK
    reader.οnlοad=function(){ 
      var result=this.result; //读取成功后结果存放在result属性中
      console.log(result);
    }
  } 
}

续写上传文件----读取Excel文件内容

使用技术：

1.xlsx.js和jszip.js额外库文件，

2.FileReader API，

3.<input type="file" id="upload">

具体实现：

HTML：

<input type="file" id="upload">

JS：

var f=document.getElementById("upload");
f.οnchange=function(){
  var files=this.files;
  if(files.length>0){
    var file=files[0];
    readDataByType(file);
  }
}
function readDataByType(file){
  var name=file.name, //取得File的名字
      nameArr=name.split("."), 
      type=nameArr[nameArr.length-1], //取得文件的扩展名
      reader=new FileReader();
  switch(type){
    case "xls":
    case "xlsx":
      reader.readAsBinaryString(file); //以二进制方式读取文件
      reader.οnlοad=function(f){
        var result=this.result;
        var wb=XLSX.read(result,{type:"binary"}); //以二进制方式读取excel文件
        var sheet=wb.Sheets[wb.SheetNames[0]]; //通过第一个sheet表名找到对应的sheet表
        var jsono=XLSX.utils.sheet_to_row_object_array(sheet); //读取sheet表中的数据为JSON格式
        var data="";
        for(var i in jsono){ //遍历JSON对象
          var str="";
          for(var item in jsono[i]){
            str+=jsono[i][item]+"  ";
          }
          data+=str+"\n";
        }
        console.log(data);
      }
    ;break;
  }
}

目前JS能上传的文件格式尝试过得有txt，json，xls，xlsx，对于doc和docx格式的文件上传还不太清楚，如果亲知道，可以评论共享下哈！！

无命可取

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
救急，非IE浏览器实现Javascript对文件上传与下载操作

前几天遇到的问题，查了好多资料，大部分技术都是针对IE浏览器的，用的是ActiveXObject实现。但是本人就想用chrome浏览器实现，肿么办？查了些资料，发现H5新增了一些功能能帮助我们解决这些问题。在这里就不描述IE浏览器如何实现了，网上一搜一堆，这里只帮助那些使用chrome的小伙伴解决问题，请叫我雷锋，不谢！！ JS下载文件：使用技术： 1.Blob对象，
复制链接

扫一扫