js文件上传和操作的简单使用

Ryou Lv1

作为一个前端小白,当然就是以小白的身份出发,目前主要就是想先尝试一下这个东西,然后再考虑要不要去深入了解。

既然是这样那就直接上代码,省去多余解释和官方定义。

文件上传和获取

上传入口:

1
<input type="file" id="input" />

然后准备一些用于测试文件,这里我就用 txt 文档来做测试,里面顺便填了一些东西,方便观察。

测试数据

然后就可以上传文件了,但是只上传文件的话还不够,还需要获取到文件的相关信息才行。

1
2
3
4
5
const input = document.querySelector('#input')

input.addEventListener('change',() => {
console.log(input.files)
})

在上面代码中,先获取到 input 标签,然后给 input 添加一个 change 监听事件。

当文件上传完毕之后就能看到获取的数据了。

获取到的数据

显示获取到的数据

接下来用到 FileReader 对象将获取到的数据显示出来。

这里需要修改一下代码。

1
2
3
4
5
6
7
8
9
10
11
12
const rs = new FileReader()
const input = document.querySelector('#input')

input.addEventListener('change',() => {
//读取内容
rs.readAsText(input.files[0])
//事件处理
rs.onload = () => {
//输出结果
console.log(rs.result)
}
})

打开控制台,可以看到数据已经读取出来了

读取到的数据

FileReader 对象有如下几个事件:

  1. onloadstart :当读取操作开始时调用
  2. onprogress :在读取文件数据过程中周期性调用
  3. onabort :当读取操作被终止时调用
  4. onerror :当读取操作发生错误时调用
  5. onload :当读取操作成功完成时调用
  6. onloadend :当读取操作完成时调用,无论成功或失败

上面就用到了 onload 事件,当读取操作成功完成时调用,然后顺便在做个小测试…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const rs = new FileReader()
const input = document.querySelector('#input')
var count = 0

input.addEventListener('change', () => {
rs.readAsText(input.files[0])

//当读取操作开始时调用
rs.onloadstart = () => {
console.log('开始读取')
}

//在读取文件数据过程中周期性调用
rs.onprogress = () => {
count++
console.log('读取中...' + count)
}

//当读取操作成功完成时调用
rs.onload = () => {
console.log('读取完毕')
}
})

为了方便观察 onprogress 的变化,需要选择一个比较大的文件。

运行结果:

读取到的数据

因为 FileReader 是异步的,如果不使用事件处理的话是获取不到数据的,控制台输出的会是 null

其它

如果想上传图片来做测试的话,可以把 rs.readAsText 换成 rs.readAsDataURL 然后将 base64 编码放到图片的路径上就ok了。

比如这样:

读取到的数据

1
2
<input type="file" id="input" />
<img src="" class="img">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const rs = new FileReader()
const input = document.querySelector('#input')
const img = document.querySelector('.img')

input.addEventListener('change', () => {
rs.readAsDataURL(input.files[0])
rs.onloadstart = () => {
console.log('开始读取')
}
rs.onprogress = () => {
console.log('读取中...')
}
rs.onload = () => {
img.src = rs.result
}
})

结语

这是一个十分简单小案例,如果想深入了解,可以 点击这里

  • 标题: js文件上传和操作的简单使用
  • 作者: Ryou
  • 创建于 : 2023-10-20 11:27:40
  • 更新于 : 2024-04-03 00:57:24
  • 链接: https://www.ryou.vip/2023/10/20/js中文件上传和操作的简单使用/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
此页目录
js文件上传和操作的简单使用