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

  前几天遇到的问题,查了好多资料,大部分技术都是针对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.ο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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值