Question

我正在编写一个程序，允许用户选择和显示我当前使图像部分工作的图像，音频和视频。我已经关注了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>

Answer 1

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

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

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

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

在html中选择和显示音频和视频

1 个答案: