在 HTML5 中使用 FileReader 选择文件的问题答案

【问题标题】：Problems with selecting files with FileReader in HTML5在 HTML5 中使用 FileReader 选择文件的问题
【发布时间】：2012-03-22 04:22:05
【问题描述】：

我正在尝试制作视频预览脚本。我想要一个用于拖放和输入 type="file" 元素选择的文件的功能。这是函数：

                function FileHandler(files){
                    for(var i = 0; i < files.length; i++){

                        file = files[i];

                        var reader = new FileReader();
                        reader.onload = function(evt){
                            var VideoSpan = document.createElement('span');
                            var Video = document.createElement('video');
                            VideoSpan.classList.add('VideoPreviewSpaner');
                            Video.classList.add('VideoPreview');
                            Video.controls="controls";
                            Video.src = evt.target.result
                            VideoSpan.appendChild(Video);
                            document.getElementById('VideoWindow').appendChild(VideoSpan);
                            document.getElementById('VideoWindow').style.display = "block";
                        }
                        reader.readAsDataURL(file);
                    }
                }

然后是

<input type="file" id="OpenFileDialog" multiple onchange="FileHandler(this.files)">

还有 dnd 处理程序：

            function d(e){
                e.stopPropagation();
                e.preventDefault();
                files = e.dataTransfer.files;
                FileHandler(files);
            }
            document.getElementById('droparea').addEventListener('drop',d,false);

我真的看不出有什么问题 reader.onload 永远不会被调用！有一些帮助会很棒！

【问题讨论】：

标签： javascript html filereader

【解决方案1】：

遇到类似问题时来到这里。

尝试执行onerror，你会发现谷歌浏览器抛出“安全错误”。不过在 Firefox(7.0.1) 中也是如此。

这是由于 Google Chrome 对开发人员施加的本地文件安全限制。这种本地文件安全限制确实会影响快速开发测试！

将 HTML 放在网络服务器上，问题就解决了。没有网络服务器？试试火狐！ --allow-file-access-from-files 选项从未真正对我有用！

最好，斯里达尔

【讨论】：