发表于: 2020-07-23 21:51:31
1 2112
今日完成:
运用input type=“file”的标签获取图片,再使用FileReader这个对象 new 一个实例,通过这个对象的readAsDataURL()方法读取file标签获取的图片并转换为base64格式,完成之后通过ajax之类的方式传到后台。
HTML
需要一个input type="file" 的标签 如果需要预览的话可以再加一个img标签
<input type="file" id="file" />
var file = document.getElementById('file');
var image = document.querySelector("img");
file.onchange = function() {
var fileData = this.files[0];//获取到一个FileList对象中的第一个文件(File 对象)。这是我们上传的文件
}
二、然后运用 FileReader 这个对象,FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件。使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据。这里用到了里面的 readAsDataURL 这个方法,它能把文件用base64格式读出。
var reader = new FileReader();
reader.readAsDataURL(fileData);//异步读取文件内容,结果用data:url的字符串形式表示
/*当读取操作成功完成时调用*/
reader.onload = function(e) {
console.log(e); //查看对象属性里面有个result属性,属性值,是一大串的base64格式的东西,这个就是我们要的图片
console.log(this.result);//取得数据 这里的this指向FileReader()对象的实例reader
image.setAttribute("src", this.result)//赋值给img标签让它显示出来
}
评论