上传图片时FileReader的onprogress事件未触发，如何触发？

嘿，我一眼就瞅出问题所在啦——你只是创建了FileReader实例，但压根没调用任何读取文件的方法，所以它根本没开始读取文件，onprogress事件自然不会触发啦！

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>图片上传进度监控</title>
    <script type="text/javascript">
        function myFunction(){
            // 先判断用户是否选中了文件，避免报错
            if (!event.target.files || event.target.files.length === 0) {
                console.log("请先选择一个图片文件");
                return;
            }
            
            const selectedFile = event.target.files[0];
            console.dir(`选中的文件：${selectedFile.name}`);
            
            const reader = new FileReader();
            
            // 监听读取进度事件
            reader.onprogress = function(progressEvent) {
                if (progressEvent.lengthComputable) {
                    const percentLoaded = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                    console.log(`总大小：${progressEvent.total}字节，已加载：${progressEvent.loaded}字节 (${percentLoaded}%)`);
                } else {
                    // 少数情况下无法计算文件总大小，做个兜底提示
                    console.log("无法计算当前加载进度");
                }
            };
            
            // 关键步骤：调用读取方法，启动文件读取流程
            reader.readAsDataURL(selectedFile);
            
            // 可选：监听读取完成事件，做后续操作（比如图片预览）
            reader.onload = function() {
                console.log("文件读取完成！");
                // 示例：创建预览图片
                // const previewImg = document.createElement('img');
                // previewImg.src = reader.result;
                // previewImg.style.maxWidth = '300px';
                // document.body.appendChild(previewImg);
            };
            
            // 可选：监听读取错误事件
            reader.onerror = function() {
                console.error("文件读取出错：", reader.error);
            };
        }
    </script>
</head>
<body>
    <input type="file" id="myFile" accept="image/*" onchange="myFunction()">
</body>
</html>

核心修正点说明 #

• 必须调用FileReader的读取方法：FileReader只是一个工具类，你得通过readAsDataURL()、readAsArrayBuffer()或readAsText()这类方法告诉它要读取文件，只有启动了读取流程，onprogress才会在读取过程中持续触发。
• 增加文件存在校验：避免用户没选文件就触发事件导致控制台报错，让代码更健壮。
• 完善异常处理：增加了读取错误的监听，方便排查问题。

内容的提问来源于stack exchange，提问作者Developer Strange