通过 html5 FileReader 实现上传图片预览功能详解编程语言

Html 部分

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title></title> 
    </head> 
 
    <body> 
 
        <input type="file" name="file" onchange="showPreview(this)" /> 
        <img id="portrait" src="" width="70" height="75"> 
    </body> 
 
</html>

JS部分

<script type="text/javascript"> 
    function showPreview(source) { 
        var file = source.files[0]; 
        if (window.FileReader) { 
            var fr = new FileReader(); 
            fr.onloadend = function(e) { 
                document.getElementById("portrait").src = e.target.result; 
            }; 
            fr.readAsDataURL(file); 
        } 
    } 
</script>

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/10077.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论