Question

我正在尝试使用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]);
        }
    });
});

任何人都可以帮我解决这个问题吗？非常感谢！

Answer 1

在Chrome中，您可以添加： - 允许从文件访问文件到Chrome命令行，以允许从本地HTML页面读取本地文件。

您还可以将代码捆绑为Chrome扩展程序并以此方式获取本地文件。

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

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

1 个答案: