如何在 Chrome 应用程序中使用 input type="file" 事件处理程序答案

【问题标题】：how to use input type="file" event handler in chrome app如何在 Chrome 应用程序中使用 input type="file" 事件处理程序
【发布时间】：2014-01-22 10:48:04
【问题描述】：

我希望能够在 Chrome 应用中通过 input type="file" 打开文件。以下代码产生错误：

拒绝执行内联事件处理程序，因为它违反了遵循内容安全政策指令

<html>
<head>
    <title></title>
</head>
<body>
    <input type="file" onchange="btnClick(event)" />

    <script>
        function btnClick(evt) {
            var fileReader = new FileReader();
            fileReader.onload = function (event) {
                var str = event.target.result;
                console.log(str);
            }
            fileReader.readAsText(event.target.files[0]);
        }
    </script>

</body>
</html>

我能做些什么来解决它？

【问题讨论】：

标签： javascript html google-chrome input google-chrome-app

【解决方案1】：

内联事件处理程序在 chrome 应用程序中不起作用，从 html 中删除事件处理程序并在 javascript 中实现它。此外，该脚本不得在 html 文件中。它应该在自己的 js 文件中并在 html 中引用。这是记录在HERE

html

<input type="file" id="file1"/>

document.getElementById("file1").addEventListener("change",handleChange);

function handleChange(){
    var fileReader = new FileReader();
        fileReader.onload = function (event) {
            var str = event.target.result;
            console.log(str);
        }
    fileReader.readAsText(event.target.files[0]);    
}

FIDDLE

【讨论】：