js的文件操作（读取input中的文件new FileReader()、new File（）映射、以及在不是表单的数据以formdata的形式传给后端）

一、在js想要操作文件有FileReader()和FileWriter()这是一个基本的读取input选择文件的方法<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="conten

Program W

7809人浏览 · 2021-07-13 20:55:11

Program W · 2021-07-13 20:55:11 发布

js文件处理 File API
使用 JavaScript File API 实现文件上传

一、在js想要操作文件有FileReader()和FileWriter()

这是一个基本的读取input选择文件的方法

<!-- oscar999  -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="author" content="oscar999">
  <title></title>
  <script>
  function  handleFiles(files)
  {
    if(files.length)
    {
       var file = files[0];
       var reader = new FileReader();
       reader.onload = function()
       {
           document.getElementById("filecontent").innerHTML = this.result;
       };
       reader.readAsText(file);
    }
  }
  </script>
  
  </head>
  <body>

  <input type="file" id="file" onchange="handleFiles(this.files)"/>
  <div id="filecontent"></div>
  </body>
</html>

二、JavaScript File对象的初始化（new File）

第一个参数是一个字符串数组。数组中的每一个元素对应着文件中一行的内容。
第二个参数就是文件名字符串。

var objFile=new File(["First Line Text","Second Line Text"],FileName);

三、结合读取文本，以文件的方式传给后端（formdata的数据）

这里的new FormData（）指，后端需要一个formdata的数据，因为不是表单验证，所以有这一步~

const FileName = 'test.bpmn'
        const file = new File([this.diagramXML], FileName);
        const fm = new FormData();
        fm.append('file', file);
                
        // console.log(fm)
        this.uploadStreamAndDeployment({data: fm}).then(res => {
          console.log(res)
        })