通過 html5 FileReader 實現上傳圖片預覽功能

jopen 9年前發布 | 8K 次閱讀 HTML HTML5

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>



 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！