javascript - 新手关于FileReader API的几个疑问
阿神
阿神 2017-04-10 16:14:06
[JavaScript讨论组]

新手一名,目前在看《HTML5与CSS3权威指南》,看到filereader这一节的时候遇到几个问题,望大神能帮忙解惑。

  1. var file = document.getElementById("file").files[0]里的下标[0]是否第一个文件的意思,我不设置multiple属性的话它是否有必要存在?

  2. reader.onload = function(e){}里的参数e是哪里来的,为什么要传入这个参数,因为函数体里没有用到啊,希望能解释下这种用法。(本菜鸟学过一点js基础,但没接触过这种)

代码如下:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>fileReader对象的事件先后顺序</title>
</head>
<script language=javascript>
    var result = document.getElementById("result");
    var input = document.getElementById("input");
    if (typeof FileReader == 'undefined') {
        result.innerHTML = "<p class='warn'>抱歉,你的浏览器不支持 FileReader</p>";
        input.setAttribute('disabled', 'disabled');
    }
    function readFile() {
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            result.innerHTML = '<img src="' + this.result + '" alt=""/>'
            alert("load");
        }
        reader.onprogress = function (e) {
            alert("progress");
        }
        reader.onabort = function (e) {
            alert("abort");
        }
        reader.onerror = function (e) {
            alert("error");
        }
        reader.onloadstart = function (e) {
            alert("loadstart");
        }
        reader.onloadend = function (e) {
            alert("loadend");
        }
        reader.readAsDataURL(file);
    }
</script>
<p>
    <label>请选择一个图像文件:</label>
    <input type="file" id="file"/>
    <input type="button" value="显示图像" onclick="readFile()"/>
</p>
<p name="result" id="result">
    <!-- 这里用来显示读取结果 -->
</p>
阿神
阿神

闭关修行中......

全部回复(1)
阿神

1、files获得的是filelist数组所以你需要去除数组中的元素,你可以遍历数组也可以直接使用files[0]来取元素。
2、e是触发事件时的event参数,他有一些属性方法

,在这个方法中没有用到可以不写

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号