首页 > 其他分享 >js 中 file 文件 应用

js 中 file 文件 应用

时间：2024-11-30 23:30:48浏览次数：9  
标签：文件 const 示例 js file document 上传

文章目录

文件上传

以下是关于前端 File 对象的基本属性、文件上传、大文件上传以及格式校验的相关内容及实例：

File 对象基本属性

在前端，当用户通过 <input type="file"> 元素选择文件后，可以获取到对应的 File 对象，它包含了诸多有用的属性：

  • name：表示文件名，包含文件的扩展名，例如 "example.jpg"。
  • size：以字节为单位返回文件的大小，比如一个 500KB 的文件，其 size 值大约就是 500 * 1024 字节（因为 1KB = 1024 字节）。
  • type：返回文件的 MIME 类型，像图片文件常见的有 "image/jpeg"（JPEG 图片）、"image/png"（PNG 图片），文本文件可能是 "text/plain" 等。
  • lastModified：返回文件最后修改时间的时间戳（从 1970 年 1 月 1 日 00:00:00 UTC 到文件最后修改时间的毫秒数）。

示例代码，获取文件的基本属性：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <input type="file" id="fileInput">
    <button onclick="getFileInfo()">获取文件信息</button>
    <script>
        function getFileInfo() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (file) {
                console.log('文件名:', file.name);
                console.log('文件大小:', file.size, '字节');
                console.log('文件类型:', file.type);
                console.log('最后修改时间:', new Date(file.lastModified)
                .toLocaleString());
            }
        }
    </script>
</body>

</html>

文件上传

通常是将用户选择的文件发送到后端服务器进行保存或进一步处理，基本步骤如下：

  1. 创建 FormData 对象：用于模拟表单数据，方便将文件数据和其他可能的额外数据（比如文件名、描述等额外字段）一起发送。
  2. 添加文件到 FormData：把通过 <input type="file"> 获取到的 File 对象添加进去。
  3. 发起 XMLHttpRequest 或使用 fetch API 发送请求：将包含文件的 FormData 发送到后端指定的接口。

以下是使用 fetch API 的示例，假设后端接口地址为 "/upload"：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">上传文件</button>
    <script>
        async function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (file) {
                const formData = new FormData();
                formData.append('file', file);
                try {
                    const response = await fetch('/upload', {
                        method: 'POST',
                        body: formData
                    });
                    const result = await response.json();
                    console.log(result);
                } catch (error) {
                    console.error('上传出错:', error);
                }
            }
        }
    </script>
</body>

</html>

大文件上传

大文件上传需要考虑到避免一次性将整个大文件读入内存，防止浏览器内存溢出等问题，常见的做法是采用切片上传，步骤大致如下：

  1. 将大文件进行切片：按照一定的大小（比如每片 1MB 或者其他合适的大小）把文件切割成多个小的文件片段。
  2. 为每个切片标记顺序等信息：方便后端接收后能正确地将切片组合还原成完整文件，例如可以给每个切片添加序号字段。
  3. 依次上传切片：逐个将切片发送到后端，一般可以通过循环和记录上传进度等机制来实现。
  4. 后端处理切片并合并还原文件：后端接收到切片后，按照约定的顺序等规则将它们合并成原始的大文件。

以下是一个简单的大文件切片上传的前端示例（仅示意切片部分和简单的上传逻辑，完整功能还需结合后端完善），假设切片大小设为 1MB（1024 * 1024 字节）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <input type="file" id="bigFileInput">
    <button onclick="uploadBigFile()">上传大文件</button>
    <script>
        function uploadBigFile() {
            const fileInput = document.getElementById('bigFileInput');
            const file = fileInput.files[0];
            if (file) {
                const chunkSize = 1024 * 1024; // 1MB 切片大小
                const chunks = [];
                let start = 0;
                while (start < file.size) {
                    const end = Math.min(start + chunkSize, file.size);
                    const chunk = file.slice(start, end);
                    chunks.push(chunk);
                    start = end;
                }
                // 此处可以添加代码来逐个上传切片，比如通过循环调用上传函数，并且处理进度等情况
                console.log('文件已切片，共', chunks.length, '个切片');
            }
        }
    </script>
</body>

</html>

文件格式校验

可以通过 File 对象的 type 属性或者文件扩展名来校验文件格式是否符合要求，以下是几种常见的校验方式示例：

通过 type 属性校验图片格式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <input type="file" id="imageFileInput">
    <button onclick="checkImageFormat()">校验图片格式</button>
    <script>
        function checkImageFormat() {
            const fileInput = document.getElementById('imageFileInput');
            const file = fileInput.files[0];
            if (file) {
                const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
                if (allowedTypes.includes(file.type)) {
                    console.log('图片格式符合要求');
                } else {
                    console.log('图片格式不符合要求');
                }
            }
        }
    </script>
</body>

</html>
通过文件名扩展名校验
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <input type="file" id="fileInputForExtensionCheck">
    <button onclick="checkFileExtension()">校验文件扩展名</button>
    <script>
        function checkFileExtension() {
            const fileInput = document.getElementById('fileInputForExtensionCheck');
            const file = fileInput.files[0];
            if (file) {
                const fileName = file.name;
                const allowedExtensions = ['.jpg', '.png', '.txt'];
                const fileExtension = fileName.substring(fileName.lastIndexOf('.'));
                if (allowedExtensions.includes(fileExtension.toLowerCase())) {
                    console.log('文件扩展名符合要求');
                } else {
                    console.log('文件扩展名不符合要求');
                }
            }
        }
    </script>
</body>

</html>

上述示例展示了前端 File 对象相关操作的基础实现，实际应用中，根据具体的业务需求和后端配合情况，还需要进一步完善逻辑、处理错误以及优化用户体验等。

文件解析

以下是几种前端对后端返回的文件流进行解码显示的常见实例，分别针对不同类型的文件（图片、文本文件等）进行说明：

一、处理图片文件流（以 Blob 格式接收文件流为例）

当后端返回图片文件流时，前端可以将其转换为可显示的图片元素（如 <img> 标签来展示），示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <img id="imageDisplay" src="" alt="显示图片">
    <script>
        // 模拟后端返回的文件流数据，这里先创建一个图片的 Blob 对象示例，实际中通常通过 AJAX 等方式获取后端返回数据
        const imageBlob = new Blob([/* 这里可以放入图片的二进制数据，示例简化省略具体数据 */], { type: 'image/jpeg' });

        const imageUrl = URL.createObjectURL(imageBlob);
        const imageElement = document.getElementById('imageDisplay');
        imageElement.src = imageUrl;

        // 注意，在合适的时候（比如页面卸载等情况），需要释放这个临时的 URL 对象，避免内存泄漏
        window.addEventListener('unload', function () {
            URL.revokeObjectURL(imageUrl);
        });
    </script>
</body>

</html>

在实际应用中，通常会使用 fetch 或者 XMLHttpRequest 等方式从后端获取文件流数据并转换为 Blob，以下是使用 fetch 来获取后端返回的图片文件流并显示的完整示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <img id="imageDisplay" src="" alt="显示图片">
    <script>
        fetch('后端图片文件流接口地址', {
            method: 'GET',
            // 根据后端要求设置相应的请求头，比如认证相关的、指定返回格式等
            headers: {
                'Authorization': 'Bearer your_token'
            }
        })
           .then(response => response.blob())
           .then(imageBlob => {
                const imageUrl = URL.createObjectURL(imageBlob);
                const imageElement = document.getElementById('imageDisplay');
                imageElement.src = imageUrl;
                window.addEventListener('unload', function () {
                    URL.revokeObjectURL(imageUrl);
                });
            })
           .catch(error => {
                console.error('获取图片文件流出错:', error);
            });
    </script>
</body>

</html>

二、处理文本文件流

对于后端返回的文本文件流，前端可以将其读取并展示在页面上（比如显示在 <textarea> 中），示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <textarea id="textDisplay" rows="10" cols="50"></textarea>
    <script>
        // 模拟通过 AJAX 获取后端返回的文本文件流数据，转换为文本并显示，
        // 以下先简化用一个文本 Blob 示例
        const textBlob = new Blob([/* 这里放入文本的二进制数据，示例简化省略 */]
        , { type: 'text/plain' });

        const reader = new FileReader();
        reader.onload = function (e) {
            const textArea = document.getElementById('textDisplay');
            textArea.value = e.target.result;
        };
        reader.readAsText(textBlob);

        // 如果是通过 fetch 等真实获取后端数据，示例如下：
        fetch('后端文本文件流接口地址', {
            method: 'GET'
        })
           .then(response => response.blob())
           .then(textBlob => {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const textArea = document.getElementById('textDisplay');
                    textArea.value = e.target.result;
                };
                reader.readAsText(textBlob);
            })
           .catch(error => {
                console.error('获取文本文件流出错:', error);
            });
    </script>
</body>

</html>

三、处理 PDF 文件流（借助 PDF.js 库来展示，需先引入 PDF.js 相关脚本）

如果后端返回的是 PDF 文件流，想要在前端展示，可以利用 PDF.js 库实现，以下是基本的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="
    https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
</head>

<body>
    <canvas id="pdfCanvas"></canvas>
    <script>
        // 模拟通过 AJAX 获取后端返回的 PDF 文件流数据，转换为可显示的 PDF，
        // 先简化示例为一个 PDF Blob
        const pdfBlob = new Blob([/* 这里放入 PDF 的二进制数据，示例简化省略 */],
         { type: 'application/pdf' });

        const url = URL.createObjectURL(pdfBlob);

        pdfjsLib.getDocument(url).promise.then(function (pdf) {
            pdf.getPage(1).then(function (page) {
                const canvas = document.getElementById('pdfCanvas');
                const context = canvas.getContext('2d');
                const viewport = page.getViewport({ scale: 1 });
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        });

        window.addEventListener('unload', function () {
            URL.revokeObjectURL(url);
        });
    </script>
</body>

</html>

同样，如果使用 fetch 等方式真实从后端获取 PDF 文件流，只需把上述模拟 Blob 的部分替换为实际的 fetch 请求及处理逻辑即可。

以上这些实例展示了不同类型文件流在前端解码显示的常见做法，实际应用中，需要根据具体的后端接口规范以及业务场景进行相应的调整和完善，比如处理请求错误、设置合适的请求头、考虑文件较大时的加载和显示优化等情况。

base64 读取及转换

以下是几种前端将图片转换为Base64编码的常见方法示例：

方法一：通过FileReader读取本地图片文件转换为Base64

这种方式适用于用户从本地选择图片后，在前端将其转换为Base64编码，方便后续展示、上传等操作。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <input type="file" id="fileInput" />
    <img id="imageDisplay" src="" alt="显示图片" />
    <script>
        const fileInput = document.getElementById('fileInput');
        fileInput.addEventListener('change', function (e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onloadend = function () {
                    const base64Data = reader.result;
                    const imageElement = document.getElementById('imageDisplay');
                    imageElement.src = base64Data;
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>

</html>

在上述代码中：

  1. 首先通过 document.getElementById 获取页面上的文件选择输入框元素。
  2. 给输入框添加 change 事件监听器，当用户选择文件后触发该事件。
  3. 在事件处理函数中，获取用户选择的文件对象（这里假设只选择一个文件，即取 files[0]）。
  4. 创建 FileReader 对象，它用于异步读取文件内容。
  5. 给 FileReader 的 onloadend 事件绑定回调函数，当文件读取完成（成功或失败都会触发该事件结束）后，从 reader.result 中获取到Base64编码的数据（readAsDataURL 方法会将文件内容读取为 data URL 格式，本质就是Base64编码的字符串加上特定的前缀标识文件类型等信息）。
  6. 最后将获取到的Base64编码数据设置到 <img> 标签的 src 属性上，实现图片的展示，也就完成了图片到Base64的转换及利用。

方法二：获取页面上已存在图片元素并转换为Base64

如果页面上已经有图片元素（例如通过 <img> 标签加载显示的图片），想要获取其Base64编码，可以按照以下示例代码操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <img id="existingImage" src="example.jpg" alt="示例图片" />
    <button id="convertButton">转换为Base64</button>
    <textarea id="base64Output" rows="5" cols="50"></textarea>
    <script>
        const convertButton = document.getElementById('convertButton');
        const base64Output = document.getElementById('base64Output');
        const existingImage = document.getElementById('existingImage');

        convertButton.addEventListener('click', function () {
            const canvas = document.createElement('canvas');
            canvas.width = existingImage.width;
            canvas.height = existingImage.height;
            const context = canvas.getContext('2d');
            context.drawImage(existingImage, 0, 0);
            const base64Data = canvas.toDataURL();
            base64Output.value = base64Data;
        });
    </script>
</body>

</html>

代码逻辑如下：

  1. 先获取页面上的相关元素，包括要转换的图片元素、转换按钮以及用于显示Base64编码结果的文本框。
  2. 给转换按钮添加点击事件监听器，当点击按钮时执行以下操作：
    • 创建一个 <canvas> 元素，设置其宽度和高度与要转换的图片元素尺寸一致。
    • 获取 <canvas> 的 2d 绘图上下文。
    • 使用 context.drawImage 方法将图片绘制到 <canvas> 上。
    • 最后通过 <canvas> 元素的 toDataURL 方法获取绘制内容对应的Base64编码数据，并将其赋值到文本框的 value 属性中显示出来，从而完成了图片到Base64编码的转换并展示结果。

以上两种方法可以根据不同的应用场景，方便地在前端实现图片到Base64编码的转换操作，常用于图片的本地处理、预上传准备等情况。

标签：文件,const,示例,js,file,document,上传
From： https://blog.csdn.net/m0_51244077/article/details/144162415

相关文章

  • Java 百度网盘300文件一组 文件批量重命名
     按260个文件一个文件夹publicstaticvoidmain(String[]args){Stringpath="F:\\壁纸爬虫合集\\爬虫文件夹No1";intfileCount=0;List<List<File>>folderList=newArrayList<>();List<File>folder......
  • Three.js入门-常见几何体
    这章节，我们将介绍Three.js中常见的几何体（Geometry），包括立方体、球体、圆柱体、平面、圆环、圆锥体等。几何体是构建3D模型的基础元素，通过不同的几何体可以创建出各种形状的物体。在Three.js中，几何体是由顶点、面、法线等数据组成的，通过材质（Material）的渲染，可以将几何体显示在......
  • 编译配置文件 build.gradle
    新创建的App项目默认有两个build.gradle，一个是Project项目级别的build.gradle；另一个是Module模块级别的build.gradle。项目级别的build.gradle指定了当前项目的总体编译规则，打开该文件在buildscript下面找到repositories和dependencies两个节点，其中repositories节点用于设置Andro......
  • VSCode修改资源管理器文件目录树缩进（VSCode目录结构、目录缩进、文件目录外观）workbenc
    文章目录方法点击左下角小齿轮点击设置点击工作台，点击外观，找到Tree:Indent设置目录树的缩进方法点击左下角小齿轮点击设置点击工作台，点击外观，找到Tree:Indent设置目录树的缩进"workbench.tree.indent"默认值为8，我给改成40了："workbench.tree.indent":40......
  • DVWA靶场文件包含(File Inclusion)通关教程(high级别)
    目录DVWA靶场建立闯关DVWA靶场建立需要的东西：phpStudy：链接：phpStudy提取码：0278DVWA-master链接：DVWA靶场提取码：0278建议在虚拟机中操作，以防数据库冲突，下面有解释安装phpstudy，然后打开Apache和MySQL访问127.0.0.1，如果显示站点创建成功就成功了......
  • 2019-8-29-02-JS-DOM
    图片轮播是Web开发中最常见的组件之一，这是一篇用原生JavaScript实现简单图片轮播的教程。要实现图片轮播，首先我们要将图片轮播拆分为图片容器、图片、上一页按钮、下一页按钮、底部点选容器、底部点选按钮。下面我们用HTML代码表示。...<divid="page"><divid="Container......
  • 【docker】Dockerfile指令讲解，与企业案例应用
    Dockerfile简介Dockerfile是一个文本文件，包含了构建Docker镜像所需的所有命令。通过执行dockerbuild命令，Docker会按照Dockerfile中的指令一步步构建出镜像。Dockerfile基本结构一个简单的Dockerfile可能包含以下内容：FROMubuntu:20.04LABELmaintainer="y......
  • 48. Web前端网页案例——【王者荣耀游戏主题网页（ 6页）】 大学生期末大作业 html5+css3+
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐♬♬♬​​​​​​​欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更......
  • 电脑内存爆红重复文件太多怎么办？3个重复文件删除方法
    日常工作中，我们使用电脑的时间长了，都会累积大量好的文件，这其中难免会出现重复文件。这些重复文件不仅占用了电脑磁盘空间，还会降低电脑性能。因此，我们必须定期对重复文件查找出来并清理删除掉，那要怎么对重复文件进行查找并清理呢？今天小编就给大家分享几个文件去重方法，都是一些比......
  • JAVA文件下载
    1、控制器代码@PostMapping('/clientDownload')publicvoidclientDownload(HttpServletResponseresponse){try{returnFileUtils.downloadFile(filePath,downloadnFileName,response);}catch(Exceptione){thro......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99