我正在尝试制作视频预览脚本。我想要一个用于拖放和由 input 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 从未被调用过!如果有一些帮助,那就太好了!
最佳答案
当我遇到类似问题时来到这里。
尝试实现 onerror,您会发现 Google Chrome 抛出“安全错误”。不过在 Firefox(7.0.1) 中同样有效。
这是由于 Google Chrome 对开发人员施加了本地文件安全限制。这种本地文件安全限制确实会影响快速开发测试!
将 HTML 放到网络服务器上,问题就解决了。没有网络服务器?试试 Firefox! --allow-file-access-from-files 选项对我来说从来没有真正起作用!
最好的, 斯里达尔
关于javascript - 在 HTML5 中使用 FileReader 选择文件的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7022646/