使用URL.createObjectURL(file | blob)得到一个当前文件的一个内存URL;需要使用URL.revokeObjectURL(url)释放内存。
使用new FileReader()创建文件读取对象,可以调用reader.readAsArrayBuffer、reader.readAsDataURL、reader.readAsText等方法。使用reader.readAsDataURL(file);注意:该方法创建是异步的,需要使用reader.onload方法使用可以得到转换后的blob://路径
使用URL.createObjectURL(blob)得到图片地址
function fileChangeCreateObjectURL() {
const oFile = document.getElementById('file')
oFile.addEventListener('change', () => {
var objUrl = oFile.files[0];
console.log(objUrl, 'objUrl')
const blob = new Blob([objUrl]); // 文件转化成二进制文件
console.log(blob, 'blob')
var windowURL = window.URL || window.webkitURL;
//createObjectURL创建一个指向该参数对象(图片)的URL
var dataURL = windowURL.createObjectURL(blob);
console.log(dataURL, 'dataURLdataURL')
document.getElementsByClassName('test')[0].src = dataURL
})
}
使用fileReader得到图片地址
function fileChangeFileReader() {
const oFile = document.getElementById('file')
oFile.addEventListener('change', () => {
var objUrl = oFile.files[0];
var reader = new FileReader(); //新建一个FileReader
reader.readAsDataURL(objUrl); //读取文件,保存为base64 格式
reader.onload = function (evt) { //读取完文件之后会回来这里
var imageString = evt.target.result;
console.log(imageString,'imageString')
//获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
// var windowURL = window.URL || window.webkitURL;
//createObjectURL创建一个指向该参数对象(图片)的URL
// var dataURL = windowURL.createObjectURL(objUrl);
// $("#showImage").attr("src", dataURL);
// console.log(dataURL, 'dataURL')
document.getElementsByClassName('test')[0].src = imageString
}
})
}