zoukankan      html  css  js  c++  java
  • js操作一般文件和csv文件

    js操作一般文件和csv文件

    1. 将文本文件读成字符串

      <input type="file" id="upload">
      
      document.getElementById("upload").addEventListener("change", function() {
          var files = this.files;
          if(files.length == 0) {
              console.log("没有文件");
              return;
          }
      
          var reader = new FileReader();
      
          reader.readAsText(files[0]);
          reader.onload = function(e) {
              console.log("文件内容如下
      "+e.target.result);
          }
      })
      
    2. 将读取的图片展示在页面上

      <input type="file" id="upload" accept="image/png">
      
      document.getElementById("upload").addEventListener("change", function() {
          var files = this.files;
          if(files.length == 0) {
              console.log("没有文件");
              return;
          }
      
          var reader = new FileReader();
      
          reader.readAsDataURL(files[0]);
          reader.onload = function(e) {
              var img = new Image();
              img.style.width = "200px";
              img.style.height = "100px"
              img.onload = function() {
                  document.body.appendChild(img);
              }
              img.src = e.target.result;
          }
      })
      
    3. 处理和下载csv文件

      var blob = new Blob([
          `Year,Make,Model,Description,Price
          1997,Ford,E350,"ac, abs, moon",3000.00
          1999,Chevy,"Venture ""Extended Edition""","",4900.00
          1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00
          1996,Jeep,Grand Cherokee,"MUST SELL!
          air, moon roof, loaded",4799.00`
      ])        
      
      if(window.navigator.msSaveOrOpenBlob){
          window.navigator.msSaveBlob(blob, "test.csv");
      }else {
          var a = window.document.createElement("a");
          a.href = window.URL.createObjectURL(blob, {
              type: "text/plain"
          });
          a.download = "test.csv";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
      }    
      
  • 相关阅读:
    Oracle----oracle编程总结
    Oracle----oracle 事务总结
    Oracle----Oracle 11g XE release2安装与指导
    KMP之Z-function (扩展kmp)
    pkg-config
    对拍
    GPU并行编程小结
    DPHARD
    贪心/字符串好题
    树专题(伸展树 / 树链剖分 / 动态树 学习笔记)
  • 原文地址:https://www.cnblogs.com/ye-hcj/p/10353974.html
Copyright © 2011-2022 走看看