0

我正在编写一个程序，允许用户选择和显示图像、音频和视频我目前有图像部分工作。我已经按照 w3schools 上的所有示例进行操作，但我认为使用 java 脚本和 select 而不是像示例中那样说明特定文件，但对于此作业，我必须允许用户从硬盘驱动器中进行选择。 . 这是我迄今为止所拥有的重要部分。

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                .attr('src', e.target.result)
                .width(150)
                .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
}
</script>

应用程序工作图像部分的 HTML

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Image</h1>
        <a href="#page" data-icon="gear" class="ui-btn-right">Back</a>
    </div>
    <div data-role="content">

        <input type='file' accept="image/*" onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />

    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

非工作音频部分

<input type='file' accept="audio/*" onchange="readURL(this);" /> 

<audio controls>
    <source id="blah" src="#" type="audio/ogg">
    <source id="blah" src="#" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

非工作视频部分

<input type='file' accept="video/*" onchange="readURL(this);" />


<video width="320" height="240" controls autoplay>
    <source id="blah" src="#" type="video/ogg">
    <source id="blah" src="#" type="video/mp4">
    <source id="blah" src="#" type="video/webm">
    <source id="blah" src="#" type="video/">
    <object data="movie.mp4" width="320" height="240">
        <embed width="320" height="240" id="blah" src="#.swf">
    </object>
</video>
4

1 回答 1

0

您违反了一条重要的 HTML 规则：ID 是唯一的，类是可重用的。HTML 的工作图像部分是唯一包含 1 ID #blah 的部分。 参考：http ://webdesign.about.com/cs/css/qt/tipcssclassvsid.htm

此外，如果这不是问题：我也尝试过 <input type="file">，但它不是一种稳定的获取文件的方式（稍后会）。为什么？

  1. 输入检索的 URL 因浏览器而异。有些只会获取文件名（webkit），有些会获取父目录，有些可能会获取完整路径。
  2. 完整的 FileSystem API 仅受最新版本的 Google Chrome 支持，并且截至目前，还没有提供跨浏览器解决方案。参考：http ://www.html5rocks.com/en/tutorials/file/filesystem/

最后一个参考，如果您想知道文件输入的确切规格： 参考：http://www.w3.org/TR/html5/forms.html#file-upload-state-(type=file)

于 2013-04-28T20:23:15.310 回答