只需JavaScript,您就可以结合文件输入上传和Secedynsess -no jQuery吗?



,因此这是我要做的事情的基本代码概念。我想按一个按钮选择一个文本文件,然后将其读给我。基本上只是阅读TXT中输入的简短笔记和内容。与JavaScript一起玩的是新的。这似乎很容易,但是Google回到空了吗?这甚至可以完成吗?

<html>
<body>
<input type="file" id="myFile">
<button onclick="speak(myFile)">speak dang it</button>
<script>
 function speak(text) {
 var msg = new SpeechSynthesisUtterance();
 var voices = speechSynthesis.getVoices();
 msg.voice = voices[2];
 msg.voiceURI = 'native';
 msg.volume = 1;
 msg.rate = 1;
 msg.pitch = 1;
 msg.text = text;
 msg.lang = 'en-US';
 speechSynthesis.speak(msg);
 }
</script>
</body>
</html> 

您可以通过window.FileReaderwindow.Blob

访问该文件

在这里阅读:https://developer.mozilla.org/en-us/docs/web/api/filereader

更新

示例:

<html>
<body>
<input type="file" id="myFile">
<button id="speak">speak dang it</button>
<script>
    if( window.FileReader && window.speechSynthesis ) {
        const fileInput = document.getElementById("myFile");
        fileInput.addEventListener("change", event => {
            const Reader = new FileReader();
            Reader.readAsText( fileInput.files[ 0 ] );
            Reader.onload = event => {
                const contents = Reader.result;
                const utterThis = new SpeechSynthesisUtterance( contents );
                speechSynthesis.speak( utterThis );
            }
        });
    }
</script>
</body>
</html>

您应该确保对输入进行消毒并检查文件类型,但这是我可以想到的最小示例...

最新更新