jsを使用してサーバーに写真をアップロードする

jsを使用してサーバーに写真をアップロードする

この記事の例では、参考のために画像をサーバーにアップロードするためのjsの具体的なコードを共有しています。具体的な内容は次のとおりです。

html

//複数の写真をアップロードする
<input type="file" id="file" 複数>
//ネイティブ送信ボタン <input type="submit">

ジャバスクリプト

<スクリプト>
    // base64に変換された画像を受け取る配列を定義する let ArrayImg=[]
    var index = 0; // 簡単に削除できるように画像に一意の識別子を追加します // ページ上の要素を取得します let input=document.getElementById('file')
    console.log(入力);
    // onchangeイベントをバインド input.onchange=function(){
      var file = this.files[0] //ページで選択されたファイルを取得します。[N]は取得するファイルの数を示します // console.log(file);
      var iLen = this.files.length; //画像の長さを取得// console.log(iLen);
      for(var i=0;i<iLen;i++){ //ページに複数の画像を表示するか、ループを通してアップロードする //ローカルキャッシュをプレビューする var filereader = new FileReader() //ローカルキャッシュオブジェクトを作成する //取得したファイルのローカルキャッシュをbese64に変換する
      filereader.readAsDataURL(this.files[i]) //base64に変換し、free属性に保存します reader.result console.log([i]);
        filereader.onload = function () { // onload イベントを通じて this.result を取得します // console.log(this.result,333);
        ArrayImg.push(this.result)
        // HTML タグを通して img 表示画像を取り込み、変数に保存します。let img1=`<div id="divimg"><img src="${this.result}" alt="" id="id_img"></div>`  
        // 新しいdivを作成する
        div = document.createElement('div') とします。
        div['index'] = index; // 簡単に削除できるように div に一意の識別子を追加します // アップロードした img1 を新しく作成した div に配置します div.innerHTML=img1
        console.log(ArrayImg,'画像配列');
        //次に、DOM操作を通じてDOMツリーに挿入し、画像を表示します。 document.getElementsByTagName('body')[0].appendChild(div) //DOMツリーに挿入します// console.log(img);
        // クリックイベントを div にバインドして、現在クリックされている div と現在クリックされている画像配列内の base64 アドレスを削除します。div.onclick = function(){  
                    this.remove(); // ページ内の画像要素を削除します。 delete ArrayImg[this.index]; // ArrayImg 配列に対応するデータを削除します。 console.log(ArrayImg,'Image array');
                }
                //inddex は、ArrayImg 配列内のリンク アドレス index++ を削除するために現在のループが何回実行されたかを記録します。
      }
      }
    }
</スクリプト>

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

以下もご興味があるかもしれません:
  • jsを使用して画像をサーバーにアップロードし、それをエコーする
  • Node.js HTTP サーバーでファイルと画像をアップロードする方法
  • JSP+サーブレットはサーバーにファイルをアップロードする機能を実現します
  • NodeJsはシンプルなWEBアップロードおよびダウンロードサーバーを実装します
  • ローカルファイルをサーバーにアップロードする Node.js の 1 行コマンドの詳細な説明
  • jsを使用して、サーバーに写真をアップロードして表示する例を実現します。
  • HTML5+js+Javaをベースに単一ファイルをサーバーにアップロードする機能を実現
  • Node.jsを使用してファイルの変更を監視し、sftpを使用してサーバーにアップロードします。
  • NodeJSとHTML5を組み合わせて、複数のファイルをドラッグアンドドロップしてサーバーにアップロードする方法を実現
  • Ajaxアップロードは、サーバーから返されたデータに基づいてjs処理を実装します。

<<:  MySQLは挿入を使用して複数のレコードを挿入し、データを一括で追加します。

>>:  Bash で山括弧を使用するその他の方法

推薦する

Vueでファジークエリを実装する方法の簡単な例

序文いわゆるファジークエリとは、ユーザーの完全な入力やすべての入力情報がなくてもクエリサービスを提供...

vue-element-adminフレームワークを使用して、バックエンドからメニュー機能を動的に取得します。

目次2. 詳しい説明2.1. asyncRoutesルーティングを追加する2.2. 新しいpermi...

JavaScript で配列遅延評価ライブラリを実装する方法

目次概要達成方法具体的な実装評価関数の終了を決定する生成関数の範囲変換関数マップフィルター割り込み機...

MySQLデータベースで列を追加、削除、変更する方法

この記事では、例を使用して、MySQL データベースの列を追加、削除、および変更する方法について説明...

CSS の高度な使い方(実戦で活用)

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...

レスポンシブデザインについて知っておくべきこと

レスポンシブデザインとは、ウェブサイトの開発プロセス中に、ユーザーの操作やデバイス環境に応じて対応す...

Web デザインのヒント: ページ レイアウトの簡単なルール

繰り返し: サイト全体で特定のページ デザイン スタイルを繰り返します。繰り返し要素としては、特定の...

MySQL msiバージョンのダウンロードとインストールの初心者向けの詳細なグラフィックチュートリアル

目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...

Dockerfileを使用して独自のイメージを作成する方法

1. 空のディレクトリを作成する $ cd /home/xm6f/dev $ mkdir myapp...

CocosCreator MVCアーキテクチャの詳細な説明

概要この記事では、ゲームクライアントでよく使用される MVC アーキテクチャについて紹介します。ゲー...

LINUX でプロセスを表示する 4 つの方法 (要約)

プロセスは CPU とメモリ内で実行されるプログラム コードであり、各プロセスは 1 つ以上のプロセ...

Linuxはnode.jsを完全に削除し、yumコマンドで再インストールします。

最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...

Linux での MySQL 8.0.11 のインストールに関するチュートリアル

1. 公式サイトにアクセスしてインストールパッケージをダウンロードしますダウンロードリンク: クリッ...

HTML ページはダーク モードの実装をサポートします

2019年から、AndroidとiOSの両方のプラットフォームでダークモードが使用され始めました。も...

MySQL InnoDB row_id 境界オーバーフロー検証方法の手順

背景クラスメートと row_id の境界問題について話し合ったので、ここで詳しく説明します。 Inn...