フロントエンドで画像をアップロードする原理は、入力 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.24 リリースノートのいくつかの改善点
水平線<hr /> タグを使用して、現在の位置に水平の分割線を描画します。例: XML/...
以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...
この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...
分割線はウェブページでよく使われるデザインです。例えば、Zhihuのその他の回答をご覧ください。 こ...
Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...
JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明MySQL データベースを使用して、...
コード実装:コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...
CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...
この記事では、参考までにMYSQLログとバックアップとリストアについて紹介します。具体的な内容は以下...
今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...
目次序文: 1. ロック待機とデッドロックを理解する2. 現象の再発と治療要約:序文: MySQL ...
目次1. コンポーネントの構成2. コンポーネント名2.1 コンポーネントの命名3. グローバル登録...
span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...
「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...
オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...