하나의 버튼으로 파일에서 텍스트를로드하는 방법은 무엇입니까?

Question

문자 하위 분류를 사용하여 메시지 암호화/암호 해독 페이지를 코딩하려고합니다. 키를 파일에 저장하고 다시로드하려고합니다. 나는이 성공적 키로드 관리 :

<script> 
    function loadkey() { 
    var keyToLoad = document.getElementById("keyToLoad").files[0]; 
    var keyReader = new FileReader(); 
    keyReader.onload = function(keyLoadEvent) 
    { 
     var keyFromFileLoaded = keyLoadEvent.target.result; 
     document.getElementById("key").value = keyFromFileLoaded; 
    }; 
    keyReader.readAsText(keyToLoad, "utf-8"); 
} 
</script> 

<h3>Put your key here</h3> 
<textarea id="key" cols="30" rows="1"></textarea> 
<br> 
<button onclick="genKey()">Generate key</button> 
<button onclick="savekey()">Save key</button> 
<input type="file" id="keyToLoad"> 
<button onclick="loadkey()">Load key</button> 

그러나 파일 선택 버튼을 정말 바보 loodk 별도로 키 버튼을로드합니다. 그래서 입력 버튼을 숨기고로드 키 버튼을 클릭에서 트리거 :

<script> 
    function handleChooseKey() 
{ 
    document.getElementById("keyToLoad").click(); 
} 

function loadkey() { 
    var keyToLoad = document.getElementById("keyToLoad").files[0]; 
    var keyReader = new FileReader(); 
    keyReader.onload = function(keyLoadEvent) 
    { 
     var keyFromFileLoaded = keyLoadEvent.target.result; 
     document.getElementById("key").value = keyFromFileLoaded; 
    }; 
    keyReader.readAsText(keyToLoad, "utf-8"); 
} 
</script> 

<h3>Put your key here</h3> 
<textarea id="key" cols="30" rows="1"></textarea> 
<br> 
<button onclick="genKey()">Generate key</button> 
<button onclick="savekey()">Save key</button> 
<input type="file" id="keyToLoad" style="display:none;"> 
<button onclick="handleChooseKey();loadkey();">Load key</button> 

내 문제는 키 파일이로드 직후 loadkey() 함수를 작동하게 기운 다, 그래서 키가 늘 때까지로드 할 수 다음을 클릭하십시오. 도와주세요. 주셔서 감사합니다 :)

Answer 1

이 시도 :

<script> 
    function handleChooseKey() 
{ 
    document.getElementById("keyToLoad").click(); 
    document.getElementById("keyToLoad").onchange = function(e) { loadkey() }; 
} 

function loadkey() { 
    var keyToLoad = document.getElementById("keyToLoad").files[0]; 
    var keyReader = new FileReader(); 
    keyReader.onload = function(keyLoadEvent) 
    { 
     var keyFromFileLoaded = keyLoadEvent.target.result; 
     document.getElementById("key").value = keyFromFileLoaded; 
    }; 
    keyReader.readAsText(keyToLoad, "utf-8"); 
} 
</script> 

<h3>Put your key here</h3> 
<textarea id="key" cols="30" rows="2"></textarea> 
<br> 
<button onclick="genKey()">Generate key</button> 
<button onclick="savekey()">Save key</button> 
<input type="file" id="keyToLoad" style="display:none;"> 
<button onclick="handleChooseKey();">Load key</button>