ローカル フォルダー内の画像を読み込んで表示するための HTML サンプル コード

ローカル フォルダー内の画像を読み込んで表示するための HTML サンプル コード

一つの目的

Html ページでローカル フォルダーを選択すると、フォルダーとそのサブフォルダー内のすべての画像が自動的に読み取られ、ページに表示されます。

テクニカル分析:

問題

  • HTML のファイル タグによって取得されるパスは相対的です。
  • Html 内の Img でソースを指定する場合は、絶対パスが必要です。

解決:

Web API インターフェース FileReader の readAsDataURL メソッドを呼び出してデータ (関数パラメータ file タグで取得したファイル パス) を読み取り、そのデータを FileReader (base64 形式) に読み込みます。その後、Img を使用してソース データを base64 形式で指定し、画像を描画できます。

2番目のコード

<!DOCTYPE html>
<html>
<ヘッド>
    <title>ReadImageDemo</title>
</head>
<本文>
    <input type="file" id="selectFiles" onchange="dealSelectFiles()" 複数の Webkit ディレクトリ>
    <キャンバスid="myCanvas" 幅=1440 高さ=900></キャンバス>
 
    <script type="text/javascript">
        var imgPosX = 0;
        var 画像の幅 = 256;
        関数 dealSelectFiles(){
            /// 選択したファイルを取得します。
            var selectFiles = document.getElementById("selectFiles").files;
 
            for(var file of selectFiles){
                コンソールにログ出力します。
                /// ファイルの内容を読み取ります。
                var リーダー = 新しい FileReader();
                reader.readAsDataURL(ファイル);
                reader.onloadend = 関数(){
                    /// 取引データ。
                    var img = 新しい画像();
                    /// ローダーの後、result にファイル コンテンツの結果が格納されます。
                    結果:  
                    img.onload = 関数(){
                        var myCanvas = document.getElementById("myCanvas");
                        var cxt = myCanvas.getContext('2d');
                        cxt.drawImage(画像、imgPosX、0);
                        imgPosX + = imgWidth;
                    }
                }
            }
        }
    </スクリプト>
</本文>
</html>

3つの効果

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Linux での scp および sftp コマンドの詳細な説明

>>:  URL 内の特殊記号の意味を知っていますか?

推薦する

Linux で txt を mysql にインポートする方法

序文昨日、小さなプロジェクトを書いていたときに、txt ドキュメントのデータを mysql データベ...

HTML ページ スタイルの !-- -- の機能は何ですか?

主に低バージョンのブラウザ向け<!-- --> は HTML コメント タグです。上位バ...

NavicatがMySQLに接続すると、10060、1045エラーとmy.iniの場所が報告されます。

Navicat は、データベースに接続するときにエラー 10060 および 1045 を報告します...

IdeaでTomcatを起動したときに複数のリスナーが報告される問題を解決する

エラーのスクリーンショット例外が発生した場所が見つかりません。解決策: リソースディレクトリにlog...

Dockerfile を使用して Java ランタイム環境のミラーを作成する方法

現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...

SQL効率を分析する方法を説明する

Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...

ウェブデザインには目的、アイデア、思考、そして粘り強さがなければならない

<br />はじめに:このアイデアは、数日前に上級ウェブデザインの次の記事を考えていると...

WeChatアプレットはユーザーログインモジュールサーバーの構築を実装します

サーバーの構築には node.js を選択しました。まだインストールしていない方は、私の他の nod...

シェルスクリプトを使用して CentOS7 に python3.8 環境をインストールする (推奨)

ワンクリック実行仮想マシンに Python 3.8 をインストールするには、ネットワーク アダプター...

Mysql で自動増分主キー ID を更新するときに問題が発生しました

目次自動インクリメント ID を更新する理由は何ですか?質問解決方法これは私が知っている問題ですが、...

Linuxテキスト処理ツールの詳細な説明

1. /etc/passwdファイル内のデフォルトシェルが/sbin/nologinではないユーザー...

MySQLのCOUNT(*)のパフォーマンスについてお話しましょう

序文基本的に、職場のプログラマーは、count(*)、count(1)、または count(prim...

Dockerはターミナルで中国語を入力できない問題を解決します

序文:ある日、DockerでMySQLサービスを構築したところ、MySQLのコマンドラインで中国語の...

CSSスプライトの応用の詳細な説明

CSS Sprite は、CSS スプライトとも呼ばれ、画像結合技術です。この方法は、複数の小さなア...

mysql5.7 ユーザー権限の作成、ユーザーの削除、権限の取り消し

1. ユーザーを作成します。注文: 'password' によって識別される ...