Javascript FileReader在jfiddle中工作，但不在我的瀏覽器中

我有一個文件閱讀器，可以在jfiddle上運行，但不會在任何瀏覽器中運行。我使用所有最新的瀏覽器。它會讓我選擇文件，但之後沒有任何反應。我很新的JavaScript。Javascript FileReader在jfiddle中工作，但不在我的瀏覽器中

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/

來源

2016-04-21 icelated

您好！你可以提供一個鏈接到jsFiddle這是工作嗎？ jsFiddle使用瀏覽器的引擎來運行腳本（關於它的執行模型沒有特別之處），所以必須有jsFiddle正在做的事情，即瀏覽器代碼沒有做到。 – TheHansinator

jsfiddle將'javascript'封裝在'onload'事件中，可以通過在jsfiddle中檢查源代碼來查看。使用'window.onload = function（）{// do stuff}'在頁面資源之後調用函數;那就是'DOM'元素。已完全加載到'文件' – guest271314

使用window.onload或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>

來源

2016-04-21 14:29:20 guest271314

謝謝。這工作 – icelated

Javascript FileReader在jfiddle中工作，但不在我的瀏覽器中

回答

相關問題