H5 中的 new FileReader() 以及 识别上传的文件是否为图片

若是浏览器版本较高支持FileReader，就可以直接取文件list（h5里file对象为一个list，可以上传多个文件）对象的类型，
所以可以得到后缀直接以此来判断上传的文件的类型。
file对象有filename.type和filename.size的API，因此我们需要获得文件的后缀，以此来判断文件类型。

if(typeof FileReader != 'undefined'){ var file = document.getElementById("imageFile").files[0]; if((file.type).indexOf("image/")==-1){ alert("提示", "请上传图片!", "warning"); } 复制代码

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。
通过FileReader接口中的readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。

var input = document.getElementById("file"); // input fileinput.onchange = function(){var file = this.files[0];if(!!file){var reader = new FileReader();// 图片文件转换为base64reader.readAsDataURL(file);reader.onload = function(){// 显示图片document.getElementById("file_img").src = this.result;}} }<input type="file" id="file"> <div><img id="file_img"/> </div>复制代码

总结

以上是生活随笔为你收集整理的H5 中的 new FileReader() 以及 识别上传的文件是否为图片的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。