0

ユーザーが画像、オーディオ、ビデオを選択して表示できるようにするプログラムを作成しています。現在、画像部分が機能しています。私は w3schools のすべての例に従いましたが、例のように特定のファイルを指定するのではなく、Java スクリプトと選択を使用して問題が発生していると思いますが、この割り当てでは、ユーザーがハードドライブから選択できるようにする必要があります. これは私がこれまでに持っている重要なセクションです。

<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 に答える