JavaScript实现简单的前端上传图片预览

Posted 2020-08-30

JavaScript实现简单的前端上传图片预览

<div class="file_upload">
        <div id="portrait"></div>
        <input type="file" name="" id="" onchange="showPerview(this)">
    </div>

    <script type="text/javascript">
        
        function showPerview(source) {
            var file = source.files[0];
            if (window.FileReader) {
                var fr = new FileReader();
                fr.onloadend = function(e) {
                    document.getElementById(‘portrait‘).style.backgroundImage =‘url(‘+e.target.result+‘)‘;
                    document.getElementById(‘portrait‘).style.backgroundSize = ‘cover‘;
                    document.getElementById(‘portrait‘).style.backgroundRepeat = ‘no-repeat‘;
                };
                fr.readAsDataURL(file);
            }
        }

    </script>

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个htmlCanvasElement上执行mozGetAsFile()方法后的返回结果.

readAsDataURL()

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.

事件处理程序

onabort

当读取操作被中止时调用.

onerror

当读取操作发生错误时调用.

onload

当读取操作成功完成时调用.

onloadend

当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用.

onloadstart

当读取操作将要开始之前调用.

onprogress

在读取数据过程中周期性调用.