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

来源：互联网发布：股市行情数据编辑：程序博客网时间：2024/05/25 21:36

前几天遇到的问题，查了好多资料，大部分技术都是针对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个事件。

方法方法名参数描述readAsBinaryStringfile将文件读取为二进制编码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.onchange=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.onload=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.onchange=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.onload=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格式的文件上传还不太清楚，如果亲知道，可以评论共享下哈！！

2 0