如何获取input框type=file选中的文件对象（FileReader）

最新推荐文章于 2025-02-15 11:29:55 发布

暮志未晚NAN

最新推荐文章于 2025-02-15 11:29:55 发布

阅读量4.4w

点赞数 3

分类专栏： html5 文章标签： FileReader 获取input的数据对象 input的file对象

本文链接：https://blog.csdn.net/qq_30100043/article/details/76408915

版权

html5 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了如何利用HTML5的FileReader API实现图片文件的选择、读取及验证过程。通过实例化FileReader对象并调用readAsDataURL方法，可将图片转化为Base64格式，并通过正则表达式判断其是否为有效的图片类型。

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

最近突发奇想想做一个现在常用的图像上传然后从中截取头像保存的案例，所以做了一些准备工作，比如input框选择文件触发的哪些事件，这一节就保存一下我们如何获取input的type=file的input框的文件数据。

如果想获取通过input选择的文件的数据，我们就需要使用到js封装好的FileReader对象。

获取对象：

首先我们需要通过FileReader构造函数实例化对象。

var reader = new FileReader();

然后通过调用

FileReader.readAsDataURL()指定获取的数据对象（获取input的比如：input.files[0]），并且在数据读取完成后触发FileReader.onload事件，我们可以给onload赋值一个function来获取获得的相关数据。如：

FileReader.οnlοad=function (oFREvent) {
  console.log(oFREvent.target.result);
};

你就会发现打印出来的全是文件转化成的base64格式文件数据，前面有一个文件格式开头的代码，比如图片格式的都会带一个data:image/ ，来表示是图片数据，如果需要判断是否是图片类型的数据，我们就需要获取文件的类型使用。

ps：如果在input上面加一个multiple属性，输入框就可以选择多个文件。兼容性：html5，ie10+。

首先获取到文件对象，可以通过：input.files来获取到文件对象组，但是我们现在貌似只能选择一项文件，所以通过input.files[0]就获取到了文件的对象。文件对象里面包括文件大小（size），文件的名字（name）和文件类型（type）。如果上传的是一张jpg的图形，那它的type就是image/jpeg。

所以，我们可以通过使用正则判断type的值来获取是否上传的是图片来处理。如果需要规定使用的图片类型，可以使用下面的这条正则：

/^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i

如果没有要求，只要是图片就行的话就用下面：

/image\/\w+/

来进行判断一下即可

/image\/\w+/.test(file.type)//如果是图片的话就返回true

下面附上mdn介绍的相关方法：

事件处理程序

FileReader.onabort

abort事件的处理程序。每次读取操作中止时触发此事件。

FileReader.onerror

error事件的处理程序。每次读取操作遇到错误时触发此事件。

FileReader.onload

load事件的处理程序。每次读取操作成功完成时触发此事件。

FileReader.onloadstart

loadstart事件的处理程序。每次阅读开始时触发此事件。

FileReader.onloadend

loadend事件的处理程序。每次阅读操作完成（成功或失败）时触发此事件。

FileReader.onprogress

progress事件的处理程序。阅读 Blob内容时触发此事件。

FileReader.abort()

中止读操作。回来后， readyState会是 DONE。

FileReader.readAsArrayBuffer()

开始读取指定的内容 Blob，一旦完成，该 result属性包含一个 ArrayBuffer表示该文件的数据。

FileReader.readAsBinaryString()

开始读取指定的内容 Blob，一旦完成，该 result属性将以文本形式包含原始二进制数据作为字符串。

FileReader.readAsDataURL()

开始阅读指定的内容 Blob，一旦完成，该 result属性包含 data:表示文件数据的URL。

FileReader.readAsText()

开始读取指定的内容 Blob，一旦完成，该 result属性将文件的内容作为文本字符串包含。