js操作文件

2020-11-25  本文已影响0人  LAYoung_f1b8

使用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
            }
        })
    }
上一篇 下一篇

猜你喜欢

热点阅读