Html5 图片上传和预览 FileReader

作者: 玲珑花 | 来源:发表于2017-10-24 11:07 被阅读0次

Html5 图片上传和预览 FileReader
h5调用摄像机拍照或选择图片并预览
图片上传之预览
6 fileReader、websocket、移动端API、po
FileReader文件读取和图片预览
nodejs 图片预览和上传
JS图片上传预览
断点续传和分片上传
图片上传兼容到ie8
利用FileReader实现图片上传预览

Html5 图片上传和预览 New FileReader()的使用
将图片以base64编码格式变为字符串，以此实现图片的预览功能

<!doctype html>
<html>

    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <title>上传图片显示缩略图</title>
    </head>

    <body>
        <form name="uploadForm">
            <table>
                <tbody>
                    <tr>
                        <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="" /></td>
                        <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
                    </tr>
                </tbody>
            </table>
        </form>
        <script>
            var fileReader = new FileReader();
            fileReader.onload = function(event) {
                document.getElementById("uploadPreview").src = event.target.result;
            }

            function loadImageFile() {
                var file = document.getElementById("uploadImage").files[0];
                if(file) {
                    fileReader.readAsDataURL(file);
                }
            }
        </script>
    </body>

</html>

运行效果示意图