js操作文件

  • 使用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
            }
        })
    }

你可能感兴趣的:(js操作文件)