Javascript onLoad File api事件未触发答案

【问题标题】：Javascript onLoad File api event not firingJavascript onLoad File api事件未触发
【发布时间】：2014-07-07 04:55:55
【问题描述】：

我有一小段代码

<input type="file"  style="margin-left:10px" id="file"/>

而 JavaScript sn-p 是

<script type="text/javascript">
  function compress(evt){
  console.log('coming here');
                   var f = evt.target.files[0]; 
                   var r = new FileReader();
               r.onload = function(e) { 
               console.log('coming here also');

               var contents = e.target.result;
        alert( "Got the file.n" 
              +"name: " + f.name + "n"
              +"type: " + f.type + "n"
              +"size: " + f.size + " bytesn");  
      }

        }

      document.getElementById('file').addEventListener('change', compress, false);

</script>

在控制台中我可以看到coming here 但r.onload 功能不起作用。谁能告诉为什么它不起作用。我正在使用 chrome 最新版本。

【问题讨论】：

你没有调用任何 readAs* 函数，所以你的读者没有阅读任何东西，所以没有什么可以加载

标签： javascript html fileapi html5-filesystem

【解决方案1】：

你需要使用readAs*方法，如果你的文件类型是图片，请喜欢：

var f = evt.target.files[0];
var imageType = /image.*/;
if (f.type.match(imageType)) {
    var r = new FileReader();
    r.onload = function(e) { 
        var result = r.result;
        console.log(result);
    }
    r.readAsDataURL(f); 
}

【讨论】：