Chrome 上 HTML5 中的文件输入问题答案

【问题标题】：File input problem in HTML5 on ChromeChrome 上 HTML5 中的文件输入问题
【发布时间】：2011-06-22 07:42:23
【问题描述】：

我正在尝试使用 HTML5 和 Javascript 在 Chrome 中制作音频播放器。但是一开始我就遇到了一个错误（文件不可读）...

下面是我的 HTML 代码：

<head>
    <meta charset="utf-8" />

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>index</title>
    <meta name="description" content="" />
    <meta name="generator" content="Studio 3 http://aptana.com/" />
    <meta name="author" content="liuuzyan" />

    <!--<meta name="viewport" content="width=device-width; initial-scale=1.0" />-->

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="js/fun.js" type="text/javascript"></script>
</head>

<body>
    <audio id="player" controls="controls">
        Please use Firefox/Chrome/IE9 to browse this page.
    </audio>
    <input type="file" multiple="multiple" id="fileChose" />
</body>

下面是我的 Javascript 代码：

$(document).ready( function() {
    $('#fileChose').change( function() {
        var fileList=this.files;
        for(var i=0;i<fileList.length;i++) {
            var reader=new FileReader();
            reader.onloaded=function(e){
                $('#player').attr('src',e.target.result)
            }
            reader.onerror=function(e){
                switch(e.target.error.code) {
                    case e.target.error.NOT_FOUND_ERR:
                            alert("file not found");
                            break;
                    case e.target.error.NOT_READABLE_ERR:
                            alert("file not readable");
                            break;
                    case e.target.error.ABORT_ERR:
                            alert("aborted");
                            break;
                    default:
                            alert('generic error?');
                }
            }
            reader.readAsDataURL(fileList[i]);
        }
    });
});

谁能帮我解决这个问题？非常感谢！

【问题讨论】：

我已将 Chrome 更新到最新版本。而且之前的错误码（4）改成了2……对我来说真的很奇怪……
问题已解决。只需将代码上传到服务器，它就可以正常工作。我认为问题是由 Chrome 的安全系统与本地静态 html 文件引起的。
是的——我相信所有的浏览器，不仅仅是 Chrome，都会阻止网页读取用户机器上的文件。如果他们不这样做，那将是专业安全研究人员所说的“巨大的安全漏洞”。

标签： html google-chrome filereader

【解决方案1】：

在 Chrome 中，您可以在 Chrome 命令行中添加：--allow-file-access-from-files 以允许从本地 HTML 页面读取本地文件。

您还可以将您的代码捆绑为 Chrome 扩展程序并通过这种方式获取本地文件访问权限。

或者如前所述将 HTML 文件上传到服务器。

【讨论】：