读取上传文件内容

<!DOCTYPE html>
<html>
<head>
    <title>File API Example</title>
    <script src="EventUtil.js"></script>
</head>
<body>

<p>Select a file below.</p>
<input type="file" id="files-list">
<script>
    window.onload = function () {

        var filesList = document.getElementById("files-list");
        EventUtil.addHandler(filesList, "change", function (event) {
            var info = "",
                    output = document.getElementById("output"),
                    progress = document.getElementById("progress"),
                    files = EventUtil.getTarget(event).files,
                    type = "default",
                    reader = new FileReader();

            if (/image/.test(files[0].type)) {
                reader.readAsDataURL(files[0]);
                type = "image";
            } else {
                reader.readAsText(files[0]);
                type = "text";
            }

            reader.onerror = function () {
                output.innerHTML = "Could not read file, error code is " + reader.error.code;
            };

            reader.onprogress = function (event) {
                if (event.lengthComputable) {
                    progress.innerHTML = event.loaded + "/" + event.total;
                }
            };

            reader.onload = function () {

                var html = "";

                switch (type) {
                    case "image":
                        html = '<img src="' + reader.result + '" width="300px" height="300px">';
                        break;
                    case "text":
                        html = reader.result;
                        break;

                }
                output.innerHTML = html;
            };
        });
    };

</script>
<div id="progress"></div>
<pre id="output"></pre>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>File API Example</title>
    <script src="EventUtil.js"></script>
</head>
<body>
    <input type="file" id="files-list">
    <script>
    
        function createObjectURL(blob){
            if (window.URL){
                return window.URL.createObjectURL(blob);
            } else if (window.webkitURL){
                return window.webkitURL.createObjectURL(blob);
            } else {
                return null;
            }
        }
    
        window.onload = function(){
            
            var filesList = document.getElementById("files-list");
            EventUtil.addHandler(filesList, "change", function(event){
                var info = "",
                    output = document.getElementById("output"),
                    progress = document.getElementById("progress"),
                    files = EventUtil.getTarget(event).files,
                    reader = new FileReader(),
                    url = createObjectURL(files[0]);

                if (url){
                    if (/image/.test(files[0].type)){
                        output.innerHTML = "<img src="" + url + "">";
                    } else {
                        output.innerHTML = "Not an image.";
                    }
                } else {
                    output.innerHTML = "Your browser doesn't support object URLs.";
                }
            });
        };
        
    </script>
    <pre id="output"></pre>
</body>
</html>

相关阅读:
java enum
how to build a runable jar
ZF报错解决方法·
Apache配置本地测试多网站域名与虚拟主机
 PHP实现MVC开发: 一个简单的MVC
收藏PHP常用函数
 数据库密码忘记…………找回方法
 php读取excel文件reader.php excel操作类使用
 积累的常用linux命令
 JS控制浏览器大小
原文地址：https://www.cnblogs.com/human/p/3469848.html