Javascript FileReader在jfiddle中工作,但不在我的浏览器中

时间:2016-04-21 14:24:05

标签: javascript html

我有一个文件阅读器,可以在jfiddle上运行,但不能在任何浏览器中运行。我正在使用所有最新的浏览器。它会让我选择文件,但事后没有任何反应。我是javascript的新手。

javacript

<script type="text/javascript">
function readFile(file) {
    var reader = new FileReader();
    reader.onload = readSuccess;

    function readSuccess(evt) {
        var field = document.getElementById('main');
        field.innerHTML = evt.target.result;
    };
    reader.readAsText(file);
}

document.getElementById('selectedFile').onchange = function(e) {
    readFile(e.srcElement.files[0]);
};
</script>

HTML

<input type="file" id="selectedFile" />
<div id="main"></div>

jfiddle

http://jsfiddle.net/fstreamz/ngXBV/1/

1 个答案:

答案 0 :(得分:1)

使用window.onloadwindow.addEventListener("load")

<script type="text/javascript">
  window.onload = function() {
  function readFile(file) {
    var reader = new FileReader();
    reader.onload = readSuccess;

    function readSuccess(evt) {
      var field = document.getElementById("main");
      field.innerHTML = evt.target.result;
    };
    reader.readAsText(file);
  }

  document.getElementById("selectedFile").onchange = function(e) {
    readFile(e.srcElement.files[0]);
  };
}
</script>
Here is the html

<input type="file" id="selectedFile" accept="text/plain" />
<div id="main"></div>