Question

我有一小段代码

<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最新版本。

Answer 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); 
}

Javascript onLoad文件api事件未触发

1 个答案: