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

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

html

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

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

 
<画像ソース="" />

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 を応援していただければ幸いです。

以下もご興味があるかもしれません: