Javascript的onLoad File api事件没有触发

Javascript onLoad File api event not firing

本文关键字：事件 api onLoad File Javascript      更新时间：2023-09-26

我有一小段代码

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

和JavaScript代码片段

<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*方法，如果你的文件类型是image，这样做:

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); 
}
相关文章：