Chrome 上 HTML5 的文件输入问题
我正在尝试使用 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]);
}
});
});
谁能帮我解决这个问题？多谢！
I'm trying to make a audio player in Chrome with HTML5 and Javascript. But I got an error(file not readable) at the very beginning...
Below is my HTML code:
<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>
And below is my Javascript code:
$(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]);
}
});
});
Can anyone help me with this problem? Thanks a lot!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在 Chrome 中，您可以将 --allow-file-access-from-files 添加到 Chrome 命令行，以允许从本地 HTML 页面读取本地文件。
您还可以将代码捆绑为 Chrome 扩展程序，并以这种方式获取本地文件访问权限。
或者如前所述将 HTML 文件上传到服务器。
In Chrome you can add: --allow-file-access-from-files to the Chrome command line to allow local file to be read from local HTML pages.
You can also bundle your code up as Chrome Extension and get local file access that way.
Or upload the HTML files to a Server as already mentioned.