この記事では、JavaScript と HTML を使用して画像をアップロードする方法を示します。
JavaScript/HTML を使用して簡単な画像をアップロードする方法は?
JavaScript を使用して単純な画像をアップロードするには、まず HTML ページに画像タグを追加し、JavaScript コードを使用して画像を Web ページにロードして選択します。
実用的な意味については、記載されている手順を試してください。
例
まず、次の指示に従ってください。
- 「」を挿入 <入力> 」要素を入力し、入力のタイプを「 ファイル 」。
- この「ファイル」タイプは、ファイル選択のフィールドを決定し、「 ブラウズ ファイルをアップロードするためのボタン。
- 「
」タグは改行を挿入します。 - 次に、「 <画像> 」 HTML タグを追加し、「 ID 」属性を使用して、特定の名前で一意の ID を指定します。
- 「 ソース 」 メディア ファイルの URL を追加するために使用される属性:
< br >
< 画像ID = 「マイイメージ」 ソース = 「#」 >
ファイルオプションが作成され、入力を受け入れた後にのみ画像名を表示できることがわかります。
今、「 <スクリプト> 」タグで、次のコードを使用します。
< 脚本 >
窓。 addEventListener ( 'ロード' 、 関数 ( ) {
書類。 クエリセレクター ( 'input[type='ファイル']' ) . addEventListener ( '変化' 、 関数 ( ) {
もしも ( これ . ファイル && これ . ファイル [ 0 ] ) {
変化する = 書類。 getElementById ( 「img_content」 ) ;
画像 オンロード = ( ) => {
URL . revokeObjectURL ( 画像 ソース ) ;
}
画像 ソース = URL . createObjectURL ( これ . ファイル [ 0 ] ) ;
}
} ) ;
} ) ;
脚本 >
上記のコード スニペットでは、次のようになります。
- 「 addEventListener() 」 JavaScript メソッドを使用すると、定義済みのイベント ハンドラーを要素に挿入またはアタッチできます。
- 「 querySelector() 」は、特定のセレクターにリンクする特定のドキュメント内の最初のアイテムを返すために使用されるメソッドです。
- 「 getElementById() 定義した id を使用して要素を取得するには、' メソッドを使用します。そのために、 の値がパラメーターとして渡されます。
- 「 revokeObjectURL() 」は、その URL を使用して作成された既存のオブジェクト URL を解放します。そのために、画像の URL がこのメソッドのパラメーターとして渡されます。
- 「 createObjectURL() 」は、パラメータで渡されたオブジェクトを表す URL を特定の文字列に持たせる JavaScript 静的メソッドです。
出力
シンプルな画像のアップロードに成功したことがわかります。
結論
JavaScript を使用してシンプルな画像をアップロードするには、「 addEventListener() 定義されたイベント ハンドラーを要素に挿入またはアタッチできるようにするメソッド。次に、定義された要素に id でアクセスし、「 revokeObjectURL() ' と ' createObjectURL() 」メソッド。この投稿では、JavaScript/HTML を使用した簡単な画像アップロード方法について説明しました。