读取上传文件内容 

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

 

posted @ 2013-12-11 18:00  sexy_girl  阅读(287)  评论(0)    收藏  举报