Javascript FileReader working in jfiddle, but not in my browser

Question

I have a file reader that works on jfiddle but wont work in any browser. Im using all the latest browsers,. It will let me select the file, but nothing happens afterwards. Im very new to 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/

Hello! Could you provide a link to the jsFiddle in which this is working? jsFiddle uses your browser's engine to run script (there's nothing special about its execution model), so there must be something that jsFiddle is doing that your browser code is not doing. — TheHans255
– TheHans255, Commented Apr 21, 2016 at 14:27
jsfiddle wraps javascript within onload event, which can be viewed by inspecting source at jsfiddle. Use window.onload = function() {//do stuff} to call function after page resources; that is DOM elements. have fully loaded into document — guest271314
– guest271314, Commented Apr 21, 2016 at 14:36

guest271314 · Accepted Answer · 2016-04-21 14:29:20Z

1

Use window.onload or window.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>

answered Apr 21, 2016 at 14:29

guest271314

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript FileReader working in jfiddle, but not in my browser

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related