首页 > 网络编程 > JavaScript > javascript技巧 > JS获取本地文件并传输

JS获取本地文件并进行网络传输的代码详解

2024-08-07 11:50:48 作者：xump

在web中如想要获取用户计算机上的文件我们通常会用到的方法是通过一个表单元素<input type="file">操作用户选择的文件,本文小编给大家介绍了JS获取本地文件并进行网络传输的方法,需要的朋友可以参考下

获取文件

在web中如想要获取用户计算机上的文件我们通常会用到的方法是通过一个表单元素<input type="file">操作用户选择的文件。

我们可以在js中通过监听该元素的change事件获取到文件信息，通常文件会被存放在该元素的files集合中，例如：

<input type="file">
<script>
    const files = document.querySelector('input');
    files.addEventListener('change',(e)=>{
        console.log(e.target.files);
    })
</script>

File对象

File对象中主要有以下几个常用的属性，并且都是只读属性。

name：在系统中的文件名。
size：文件大小（单位为字节）。
type：文件的MIME类型。
lastModified：文件最后修改时间。

通过我们可以通过这些文件的基本信息对选择的文件进行基本的过滤或是验证，例如：

function validateFile(file){
    const maxSize = 1 * 1024 * 1024;
    const types = ['.jpg','.jpeg','.png','.bmp','.webp','.gif'];
    const fileName = file.name.toLowerCase();
    if(file.size > maxSize){
        alert('文件过大！');
        return false;
    }
    if(!types.some((item)=>fileName.endsWith(item))){
        alert('文件类型不匹配！');
        return false;
    }
    return true;
}
files.addEventListener('change',(e)=>{
    if(!validateFile(e.target.files[0])){
        e.target.value = '';
        return;
    }
    // 后续操作...
})

在以上代码中我们通过一个函数来判断我们选择的一个文件是否符合要求以进行下一步操作，主要通过file对象上的属性判断了文件的大小和类型是否符合要求，通过不同函数我们可以过滤掉不符合我们预期的文件。

在File对象上是不包含文件的内容信息的，但通常情况下我们获取到File对象上文件信息的目的是要读取到真实的文件数据信息，这时候就要借助另一个API：FileReader。

FileReader

FileReader是js中提供用于读取文件数据的API，它可以从本地文件系统中读取文件数据，其读取过程是异步进行的。

FileReader对象的常用方法：

readAsDataURL：这个方法可以读取文件并将其内容数据转化为数据URL，结果存储到FileReader实例的result属性上。
readAsText：读取文件的纯文本内容，同样结果存储到FileReader实例的result属性上。
readAsBinaryString：读取文件的二进制信息，同样结果存储到FileReader实例的result属性上。

由于读取文件的过程是异步的，所以我们主要是通过FileReader提供的监听事件来获取文件的信息，常用的事件有三个：

load：文件成功加载后触发，此时可以通过result属性获取到文件信息。
progress：文件读取进度信息，每50ms触发一次，属性与XHR中的类似。
error：文件读取出错时触发，若error事件触发则load事件将不会触发。在error触发后可以通过实例上的error属性获取到错误信息，其包含一个信息码，代表的意思分别是:1（未找到文件）、2（安全错误）、3（读取被中断）、4（文件不可读）、5（编码错误）。

假设我们需要读取一张图片然后显示到页面中我们就可以进行如下操作：

const files = document.querySelector('input');
const img = document.querySelector('img');
files.addEventListener('change',(e)=>{
    let file = e.target.files[0];
    // 验证文件基本信息
    if(!validateFile(file)){
        e.target.value = '';
        return;
    }
    let reader = new FileReader();
    reader.readAsDataURL(file); // 读出文件信息并转化为URL
    reader.addEventListener('load',(e)=>{
        console.log('文件加载完成');
        img.src = e.target.result; // 将URL赋予img元素,此时e.target为reader
    })

})

文件上传

当我们在客户端获取到了文件后我们又将如何将文件上传呢？将文件上传至服务器，这必然就涉及到了网络通信，而在js中进行网络通信那自然就会用到ajax了。

利用XHR进行文件上传

进行网络通信，我们只要想到组成一个http报文就自然而然的指定该如何编写代码了，http请求主要包含了请求行、请求头、请求体三部分信息。例如我需要实现以下http报文:

POST /upload HTTP/1.1
Host:127.0.0.1:5000
Content-Type: multipart/form-data;boundary=xxx

---xxx
Content-Disposition:form-data; name="xxhh";filename="bg.jpg"
Content-Type:image/jpeg

文件数据...
--xxx--

我们就可以通过以下js进行实现

const xhr = new XMLHttpRequest();
xhr.open('POST','http://127.0.0.1:5000/upload');
const form = new FormData();
form.append('xxhh',file,'bg.jpg');
// 第一个参数对应Content-Disposition中的name
// 第二个参数为文件数据(这里是文件真实的数据并非File对象)
// 第三个为Content-Disposition中的filename，默认为本地文件名
xhr.send(form);
xhr.onload = ()=>{
    console.log(xhr.responseText); //获取到响应结果
}

我们通过open构造出请求头信息，并通过FormData这个API让我们更加简单的编写请求体信息，它会自动将我们的请求头信息设置为Content-Type: multipart/form-data;并自动生成一个boundary，使用append方法可向其添加一个要发送字段信息，最后调用xhr.send(form)将携带数据的请求发出。

以上就是JS获取本地文件并进行网络传输的代码详解的详细内容，更多关于JS获取本地文件并传输的资料请关注脚本之家其它相关文章！