使用FileReader对象的readAsDataURL方法来读取图像文件

readAsDataURL方法会使用base-64进行编码,编码的资料由data字串开始,后面跟随的是MIME type,然后再加上base64字串,逗号之后就是编码过的图像文件的内容。

readAsDataURL获取的base64字符串如下:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......

使用Img显示图像文件

若想要将读取出来的图像文件,直接显示在网页上,您可以透过JavaScript建立一个标签,再设定src属性为Data URL,再将标签加入DOM之中,
例如以下范例所示:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function ProcessFile(e) {
            var file = document.getElementById('file').files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    var txt = event.target.result;

                    var img = document.createElement("img");
                    img.src = txt;//将图片base64字符串赋值给img的src
                    document.getElementById("result").appendChild(img);
                };
            }
            reader.readAsDataURL(file);
        }

        function contentLoaded() {
            document.getElementById('file').addEventListener('change',
                ProcessFile, false);
        }

        window.addEventListener("DOMContentLoaded", contentLoaded, false);
    </script>
</head>
<body>
请选取一个图像文件: <input type="file" id="file" name="file"/>
<div id="result"></div>
</body>
</html>

参考:

使用FileReader对象的readAsDataURL方法来读取图像文件

FileReader用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。

FileReader 的 result 可以有 3 种形式, 它取决于具体调用读取的方法
调用 reader. readAsArrayBuffer, 则 result 为 ArrayBuffer 对象
调用 reader. readAsText, 则 result 为 字符串
调用reader. readAsDataURL, 则 result 为 DataURL, DataURL 可直接 赋值给 img.src
调试发现 DataURL 是带头信息(/image) 的 base64(可能是) 编码的字符串

FileReader接口的使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var result = document.getElementById("result");
    var file = document.getElementById("file");

    //判断浏览器是否支持FileReader接口
    if (typeof FileReader == 'undefined') {
        result.InnerHTML = "

你的浏览器不支持FileReader接口!

"
; //使选择控件不可操作 file.setAttribute("disabled", "disabled"); } function readAsDataURL() { //检验是否为图像文件 var file = document.getElementById("file").files[0]; if (!/image\/\w+/.test(file.type)) { alert("看清楚,这个需要图片!"); return false; } var reader = new FileReader(); //将文件以Data URL形式读入页面 reader.readAsDataURL(file); reader.onload = function (e) { var result = document.getElementById("result"); //显示文件 result.innerHTML = '+ this.result + '" alt="" />'; } } function readAsBinaryString() { var file = document.getElementById("file").files[0]; var reader = new FileReader(); //将文件以二进制形式读入页面 reader.readAsBinaryString(file); reader.onload = function (f) { var result = document.getElementById("result"); //显示文件 result.innerHTML = this.result; } } function readAsText() { var file = document.getElementById("file").files[0]; var reader = new FileReader(); //将文件以文本形式读入页面 reader.readAsText(file); reader.onload = function (f) { var result = document.getElementById("result"); //显示文件 result.innerHTML = this.result; } } </script> <p> <label>请选择一个文件:</label> <input type="file" id="file"/> <input type="button" value="读取图像" onclick="readAsDataURL()"/> <input type="button" value="读取二进制数据" onclick="readAsBinaryString()"/> <input type="button" value="读取文本文件" onclick="readAsText()"/> </p> <div id="result" name="result"></div> </body> </html>

参考:

HTML5学习之FileReader接口

你可能感兴趣的:(angularjs,angularjs,javascript)