この記事の例では、参考のために画像をサーバーにアップロードするための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLは挿入を使用して複数のレコードを挿入し、データを一括で追加します。
一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...
セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...
目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...
序文ドラッグ アンド ドロップ機能を追加すると、プログラムがより自然でユーザーフレンドリーになります...
自宅のルーターが300Mの帯域幅を80Mに強制的に減らしたため、3205Uソフトルーターを購入しまし...
レスポンシブデザインとは、ウェブサイトの開発プロセス中に、ユーザーの操作やデバイス環境に応じて対応す...
Dockerをインストールするyumパッケージを最新バージョンに更新します: sudo yum up...
<br />ブラウザが次世代のXHTMLを処理できるようになる前に、このよりリッチなコン...
目次エフェクト表示コンポーネント設定ステップ1ステップ2ステップ3コンポーネントの使用ステップ1ステ...
エラー: Connection to blog0@localhost failed. [08001]...
目次1. 文脈1. 使用シナリオ2. 使用手順3. 結論2. 小道具の詳細1. 子供の財産2. 小道...
1. MySQLイメージをダウンロードするコマンド: docker pull mysql 2. コン...
現在、CSS プリプロセッサは Web 開発の標準となっています。 プリプロセッサの主な利点の 1 ...
最適化する理由:実際のプロジェクトが開始され、データベースが一定期間稼働した後、初期のデータベース設...
スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを...