如何使用一个按钮从文件加载文本？

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>