js上传文件并预览文件内容

xixi_wong

于 2021-11-12 14:00:01 发布

阅读量1.6k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46078854/article/details/121286794

版权

本文介绍了如何使用JavaScript实现文件选择后的内容预览及上传操作。通过FileReader API读取文件内容，当文件大小不超过20MB且格式为jpg、png、fpx、svg或psd时，文件会被上传到服务器。上传成功后可进行相应处理，否则提示错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.获取文件内容：
selectFile = (e) => {
const file = e.target.files[0];
console.log('file>>>>',file);//此时发现找不到文件内容
if (!!file) {
// 使用 FileReader 来读取文件
let reader = new FileReader()
// 读取纯文本文件,且编码格式为 utf-8
reader.readAsText(file, 'UTF-8')
//图片类: reads.readAsDataURL(file);
// 读取文件,会触发 onload 异步事件,可使用回调函数来获取最终的值.
reader.onload = function (e) {
let fileContent = e.target.result//图片类可将此值赋给img.src
console.log('fileContent>>>>',fileContent)
}
}
}
2.上传文件：
<input className="upload_ipt" type="file" id="file" onChange={(e)=>{this.selectFile(e)}}></input>
sel