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

最新推荐文章于 2024-05-19 18:33:52 发布

Program W

最新推荐文章于 2024-05-19 18:33:52 发布

阅读量8.1k

点赞数 3

分类专栏： js 大前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46037781/article/details/118710615

版权

大前端同时被 2 个专栏收录

89 篇文章 1 订阅

订阅专栏

49 篇文章 2 订阅

订阅专栏

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)
        })

[JS进阶] HTML5 之文件操作(file)

JavaScript File对象的初始化

new FormData() - FormData对象的作用及用法

Program W

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
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="content-type" content="text/html; charset=utf-8"
复制链接

扫一扫