jsを使用して写真をアップロードする機能を実現する

jsを使用して写真をアップロードする機能を実現する

フロントエンドで画像をアップロードする原理は、入力 type="file" タグを使用して画像を取得し、FileReader オブジェクトを使用して新しいインスタンスを作成し、このオブジェクトの readAsDataURL() メソッドを介してファイル タグによって取得された画像を読み取り、base64 形式に変換し、完了後に ajax またはその他の方法を介してバックグラウンドに転送することです。

html

input type="file" タグが必要です。プレビューが必要な場合は、img タグを追加できます。

<div class="warp">
            <div class="warp-content">クリックしてアップロード</div>
            <input type="ファイル" id="ファイル" />
</div>

 
<画像ソース="" />

JS

1. 画像のアップロードでは、アップロードした画像が変更されたかどうかを検出する必要があるため、ここでは js の onchange イベントを選択します。まず、input,img の dom 要素を取得します。input type='file' のデモ要素の下には、アップロードしたファイル情報を含む files 属性があります。これを印刷すると、アップロードしたファイルの名前、タイプ、その他の情報を確認できます。

var ファイル = document.getElementById('ファイル');
var image = document.querySelector("img");
ファイル.onchange = 関数() {
    var fileData = this.files[0]; //これはアップロードしたファイルです}

2. 次に、FileReader オブジェクトを使用します。FileReader は主にファイルの内容をメモリに読み込むために使用されます。一連の非同期インターフェイスを通じて、メイン スレッドでローカル ファイルにアクセスできます。 FileReader オブジェクトを使用すると、Web アプリケーションはユーザーのコンピューターに保存されているファイル (または生データ バッファー) の内容を非同期的に読み取り、File オブジェクトまたは Blob オブジェクトを使用して処理するファイルまたはデータを指定できます。ここでは、base64 形式でファイルを読み取ることができる readAsDataURL メソッドが使用されています。

使い方

var リーダー = 新しい FileReader();
reader.readAsDataURL(fileData);//ファイルの内容を非同期に読み取り、結果は data:url の文字列形式で表されます/*読み取り操作が正常に完了したときに呼び出されます*/
reader.onload = 関数(e) {
    console.log(e); // オブジェクトのプロパティを確認します。 result プロパティがあります。 プロパティ値は、base64 形式の長い文字列です。 これが必要な画像です。 console.log(this.result); // データを取得します。 ここで、this は FileReader() オブジェクトのインスタンス リーダーを指します。
    image.setAttribute("src", this.result)//img タグに値を割り当てて表示します}

FileReader オブジェクトのプロパティとイベント

FileReader オブジェクトの公式ドキュメント

3. 2 番目のステップを完了すると、写真をアップロードできます。ユーザーが再度使用する場合、アップロードしたものが写真かビデオかは保証できません。アップロードされたファイルの種類を特定する必要があります。input type='file' のデモ要素の下に、ファイルの種類情報を含む files 属性があります。この属性を使用して、アップロードされたファイルの種類を特定できます。 (reader.onload では、this.result を通じて画像の base64 形式を取得し、それを変数に割り当ててバックエンドに渡すことで、画像のアップロードを完了できます)

var ファイル = document.getElementById('ファイル');
var image = document.querySelector("img");
ファイル.onchange = 関数() {
    var fileData = this.files[0]; //FileListオブジェクトの最初のファイル(Fileオブジェクト)を取得します。これはアップロードしたファイルです。var pettern = /^image/;                
    console.info(ファイルデータタイプ)

    if (!pettern.test(fileData.type)) {
        alert("画像の形式が正しくありません");
        戻る;
     }
      var リーダー = 新しい FileReader();
      reader.readAsDataURL(fileData);//ファイルの内容を非同期に読み取り、結果は data:url の文字列形式で表されます/*読み取り操作が正常に完了したときに呼び出されます*/
       reader.onload = 関数(e) {
          console.log(e); //オブジェクトを表示 console.log(this.result); //必要なデータ image.setAttribute("src", this.result)
       }
}

完全なコード:

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <タイトル></タイトル>
        <スタイル タイプ="text/css">
            .warp {
                表示: インラインブロック;
                垂直方向の位置合わせ: 下;
                位置: 相対的;

            }

            .warpコンテンツ{
                境界線: 1px 実線の赤;
                幅: 150ピクセル;
                高さ: 150px;
                行の高さ: 150px;
                テキスト配置: 中央;
            }

            入力{
                位置: 絶対;
                上: 0;
                左: 0;
                境界線: 1px 実線の赤;
                幅: 150ピクセル;
                高さ: 150px;
                不透明度: 0;
                カーソル: ポインタ;
            }

            画像 {
                幅: 300ピクセル;
                高さ: 300px;
                境界線: 1px 実線の赤;
                上マージン: 50px;
                垂直方向の位置合わせ: 下;
            }
        </スタイル>
    </head>
    <本文>
        <div class="fileBox">
            
            <div class="warp">
                <div class="warp-content">クリックしてアップロード</div>
                <input type="ファイル" id="ファイル" />
            </div>

            <画像ソース="" />
        </div>
        <script type="text/javascript">
            var ファイル = document.getElementById('ファイル');
            var image = document.querySelector("img");
            ファイル.onchange = 関数() {
                var fileData = this.files[0]; //FileListオブジェクトの最初のファイル(Fileオブジェクト)を取得します。これはアップロードしたファイルです。var pettern = /^image/;
                
                console.info(ファイルデータタイプ)

                if (!pettern.test(fileData.type)) {
                    alert("画像の形式が正しくありません");
                    戻る;
                }
                var リーダー = 新しい FileReader();
                reader.readAsDataURL(fileData);//ファイルの内容を非同期に読み取り、結果は data:url の文字列形式で表されます/*読み取り操作が正常に完了したときに呼び出されます*/
                reader.onload = 関数(e) {
                    console.log(e); //オブジェクトを表示 console.log(this.result); //ここで必要なデータは、FileReader()オブジェクトのインスタンスリーダーを指します
                    image.setAttribute("src", this.result)
                }
            }
        </スクリプト>
    </本文>
</html>

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

以下もご興味があるかもしれません:
  • JSは、写真をアップロードし、プレビュー写真機能を実現する3つの方法を実装します
  • アップロードした写真のプレビューを実現する js メソッド
  • アップロード画像プレビュー JS スクリプト 入力ファイル画像プレビュー実装例
  • WeChat JSSDK 写真をアップロード
  • js を使用して写真をアップロードし、アップロード前にプレビューします
  • js は、アップロードされた画像を貼り付けるための ctrl+v を実装します (Chrome、Firefox、IE11 と互換性があります)
  • Javascript はアップロードされた画像のサイズを検証します [クライアント側]
  • アップロードした写真をJSPで即時表示する機能を実現
  • JS が画像をアップロードする前の制限には、(jpg、jpg、gif、サイズ、高さ、幅) などがあります。
  • js アップロード画像プレビューの問題

<<:  MySQL 8.0.24 リリースノートのいくつかの改善点

>>:  Webデザイナーの成長体験

推薦する

HTMLの水平線注釈とコードコメントの使い方をマスターするだけです

水平線<hr /> タグを使用して、現在の位置に水平の分割線を描画します。例: XML/...

div要素に丸い境界線を追加する方法

以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...

Vueはシンプルな計算機能を実装します

この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...

CSS で適応型ディバイダーを巧みに実装する N 通りの方法

分割線はウェブページでよく使われるデザインです。例えば、Zhihuのその他の回答をご覧ください。 こ...

docker を使用して Django テクノロジー スタック プロジェクトをデプロイする方法

Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...

JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明

JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明MySQL データベースを使用して、...

フォーム要素の簡単な実装コードでは登録を例に挙げています

コード実装:コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...

非常に便利な CSS 開発ツール 8 つを紹介

CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...

MYSQL ログとバックアップおよび復元の問題の詳細な説明

この記事では、参考までにMYSQLログとバックアップとリストアについて紹介します。具体的な内容は以下...

超大型フォントを使用した 40 の Web ページ デザイン

今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...

MySQL のロック待機とデッドロック問題の分析

目次序文: 1. ロック待機とデッドロックを理解する2. 現象の再発と治療要約:序文: MySQL ...

Vue コンポーネントの構成構造とコンポーネント登録の詳細

目次1. コンポーネントの構成2. コンポーネント名2.1 コンポーネントの命名3. グローバル登録...

スパンの最小高さを定義するソリューションは効果がありません

span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...

別の種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...

Maven で tomcat8-maven-plugin プラグインを使用する詳細なチュートリアル

オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...