zoukankan html css js c++ java

读取上传文件内容

<!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>

查看全文

相关阅读:
点多边形内外判断
 Winform获取js变量值
 软件和系统之间的微妙
 c# 读写json文件
 不规则图形重心
 c# winform 打开html界面（含引用外部文件js）
c# GDI 画圆，可以调整大小等功能
 mysql 查找乱码数据
 类实例的拷贝
 Java 并发专题：FutureTask 实现预加载数据在线看电子书、浏览器浏览网页等

原文地址：https://www.cnblogs.com/human/p/3469848.html