如何用HTML 5中的文件API实现图片选择预览效果

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>选择图片预览示例</title></head><body><div><input id="viewFiles" type="file"/></div><img id="viewImg" src="" style="max-width:500px"/><script type="text/javascript">    (function () {        var viewFiles = document.getElementById("viewFiles");        var viewImg = document.getElementById("viewImg");        function viewFile (file) {            //通过file.size可以取得图片大小            var reader = new FileReader();            reader.onload = function( evt ){                viewImg.src = evt.target.result;            }            reader.readAsDataURL(file);        }        viewFiles.addEventListener("change", function () {            //通过 this.files 取到 FileList            viewFile(this.files[0]);        }, false);    })();</script></body></html>

如何用HTML 5中的文件API实现图片选择预览效果

1回答