本地上传图片，实时预览

方法一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>show_image_single</title>
    </head>
    <body>
        <input type="file" onchange="previewFile()" id="ipt"/><br />
        <img src="" height="200" alt="Image preview..." id="oImg" />
        <script type="text/javascript">
            function previewFile() {
                var oImg = document.getElementById('oImg');
                var file = document.getElementById('ipt').files[0];
                var reader = new FileReader();
                
                reader.addEventListener('load', function() {
                    oImg.src = this.result;
                }, false);
                
                if (file) {
                    reader.readAsDataURL(file);
                }
            }
        </script>
    </body>
</html>

该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

读取多个文件的例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <input type="file" id="oFile" onchange="previewFiles()" multiple="multiple" />
        <div id="preview"></div>
        <script type="text/javascript">
            function previewFiles() {
                var preview = document.getElementById('preview');
                var files = document.getElementById('oFile').files;

                function readAndPreview(file) {
                    // 确保file.name符合我们要求的拓展名
                    if(/\.(jpe?g|png|gif)$/i.test(file.name)) {
                        var reader = new FileReader();
                        reader.addEventListener("load", function () {
                            var image = new Image();
                            image.height = 100;
                            image.title = file.name;
                            image.src = this.result;
                            preview.appendChild(image);
                        }, false);

                        reader.readAsDataURL(file);
                    }
                }

                if(files) {
                    [].forEach.call(files, readAndPreview);
                }
            }
        </script>
    </body>

</html>

链接：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

方法二:

使用对象URL来显示图像：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>
<div id="fileList">
    <p>No files selected!</p>
</div>
<script>
    window.URL = window.URL || window.webkitURL;

    var fileSelect = document.getElementById("fileSelect"),
        fileElem = document.getElementById("fileElem"),
        fileList = document.getElementById("fileList");

    fileSelect.addEventListener("click", function (e) {
        if (fileElem) {
            fileElem.click();
        }
        e.preventDefault(); // prevent navigation to "#"
    }, false);

    function handleFiles(files) {
        if (!files.length) {
            fileList.innerHTML = "<p>No files selected!</p>";
        } else {
            fileList.innerHTML = "";
            var list = document.createElement("ul");
            fileList.appendChild(list);
            for (var i = 0; i < files.length; i++) {
                var li = document.createElement("li");
                list.appendChild(li);

                var img = document.createElement("img");
                img.src = window.URL.createObjectURL(files[i]);
                img.height = 60;
                img.onload = function() {
                    window.URL.revokeObjectURL(this.src);
                };
                li.appendChild(img);
                var info = document.createElement("span");
                info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
                li.appendChild(info);
            }
        }
    }
</script>
</body>
</html>

链接：https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

 

posted @ 2018-01-14 23:24  井凉一一  阅读(210)  评论(0)  编辑  收藏  举报