4

Web ページをデザインする Web アプリケーションを作成しています。このアプリケーションを作成するためにhtml5を使用しています。ユーザーが画像またはビデオを選択できる [開く] ダイアログ ボックスをポップアップ表示するボタンを作成したいと考えています。選択すると、画像がページに挿入されます。

私は検索しましたが、それは私をより混乱させています。どのような機能/メソッドとリンクを使用すると想定されていますか?

4

2 に答える 2

5

スタイルを設定するためにいくつかの作業を行うことができますが、一般的な考え方は次のとおりです。

次のような非常に単純なマークアップがあるとします。

<input type='file' />
<img id="myImg" src="#" alt="your image" />
  • 要素 のchangeイベントを利用したい。<input type='file' />
  • そこに到達したら、ファイルが選択されているかどうかを確認し、選択されている場合は、配列内の最初のファイルが存在するかどうかを確認します。
  • 次に、新しいFileReaderオブジェクトを作成します。このオブジェクトに次の 2 つのことを伝えます。
    1. イベントを発生させるときはonload、関数を呼び出す必要がありますimageIsLoaded。
    2. 次に、最初のファイルからデータを取得して読み込みます。
      • これが完了すると、ステップ 1 でイベントが発生します

JavaScriptでは、次のようになります。

$(":file").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
    }
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};

この例では、画像が読み込まれるときに、imageIsLoaded関数のマークアップにある img の source 属性を置き換えます。

フィドルでの作業デモ

于 2013-11-08T20:03:29.253 に答える