base64图像编码器 上传结果出图无编码

chenyajun  2022-10-16 13:32:52  阅读 911 次 评论 0 条
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsBase64();" />    
<div id="newImgArea"></div>    
<script type="text/javascript">    
    function encodeImageFileAsBase64() {    
        var filesSelected = document.getElementById("inputFileToLoad").files;    
        if (filesSelected.length > 0) {    
            var fileToLoad = filesSelected[0];    
            var fileReader = new FileReader();    
            fileReader.onload = function(fileLoadedEvent) {    
                var srcData = fileLoadedEvent.target.result; // <-- data: base64    
                var newImage = document.createElement('img');    
                newImage.src = srcData;    
                document.getElementById('newImgArea').innerHTML = newImage.outerHTML;    
                // print base64 version in the console because it gives you the ability to copy    
                // directly to clipboard in Chrome    
                console.log(document.getElementById("newImgArea").innerHTML);    
            }    
            fileReader.readAsDataURL(fileToLoad);    
        }    
    }    
</script>
<input type="file" accept='image/*' />    <img id="output" />    <script>    
    const output = document.querySelector('#output');    
    output.style.display = 'none'    
    const file = document.querySelector('input[type=file]');    
    file.addEventListener('change', e => {    
        console.log(`converting ${e.target.value}`)    
        encodeImageFileAsURL(e.target)    
    })    
    function encodeImageFileAsURL(element) {    
        var file = element.files[0];    
        var reader = new FileReader();    
        reader.onloadend = function () {    
            console.log('RESULT', reader.result);    
            output.src = reader.result;    
            output.style.display = 'inline'    
        }    
        reader.readAsDataURL(file);    
    }    </script>


本文地址:https://chenyajun.net/index.php/post/95.html
版权声明:本文为原创文章,版权归 chenyajun 所有,欢迎分享本文,转载请保留出处!

评论已关闭!