序文
今日は、単一または複数の画像アップロードについて説明します。現在、Jquery の verupload.js、jQuery File Upload、Uploadify、jQuery.filter など、無数の主要な画像アップロード プラグインがあります。しかし。今日は上記のプラグインについては説明しません。HTML5 で FileReader を使用して、単一および複数の画像のプレビュー、削除、アップロード、その他の機能を実現する方法を見てみましょう。導入後の効果を見てみましょう。
2|0 の実装2|1 フロントエンド部分これはユーザーがクリックするボタンです。最も重要な文は input type=file であり、複数の画像をアップロードするニーズを満たすことができる multiple 属性が指定されています。
<div class=form-group form-row> <label class=col-sm-2 control-label uText>クラブ アルバム</label><div class=row> <div class=col-xs-10col-sm- 8 mTop5> <label <input type=file accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple> <img src=/Images/registerNewSite/btn_addimg.png class=addImg/> </label> </div> </div></div>
以下の領域は画像のプレビューに使用されます
<div class=form-group form-row id=preViewMore><div class=row> <div class=col-xs-9> <div id=clubInputImagePreview class=col-sm-9 img-preview img-preview-sm ></div> </div> </div></div>2|2 スタイル セクション
何？人間味があるかどうかはスタイルを見てみないとわかりません（苦笑）
2|3Js部まず、上記の HTML を分析して、入力と img タグを使用して、レンダリング内の + 画像をクリックすると、写真を選択するためのダイアログ ボックスが表示されるようにします。最初にラベルをクリックします。
$(#btnClubImg).click(function() { //TODO 何か});次にそれを見てみましょう。アップロードされたファイルを取得する必要があり、ファイルは主に入力にあるため、最初に入力タグを取得します。
$(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input);//現在の要素を出力します});現在の入力要素のラベルを出力して、それが何であるかを確認してみましょう。
最初の項目を展開すると、ファイルの長さが 0 であることがわかります。
さて、分析を続けましょう。入力ボックスが変更されたときに現在選択されているファイルを取得できるようにしたいためです。簡単に言うと、ファイルが選択されているときに、現在選択されているファイルを取得するのと同じです。したがって、分析後、input タグに変更イベントを追加する必要があることがわかります。
$(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input); $input.on(change, function () { console.log(this);//変更された現在の要素を出力します});});変更された入力要素の内部を見てみましょう。
ここで、最終変更イベント、画像名、サイズ、画像タイプを含む、選択した画像を取得したことが明確にわかります (ファイル タイプによって、現在のユーザーが画像を選択したかどうかを判断できますよね?(目を細めて微笑む) )) 繰り返しますが、これは単一のファイルに対するものであり、複数のファイルの場合は複数のファイルが存在します。
下を見ると、出力から、input タグの files 要素で必要なファイル情報を取得していることがわかります。必要なのは、それらを取得するだけです。
var ファイル = this.files var length = files.length;
このようにして、すべてのファイルとファイルの数を取得できます。次に、複数のファイルを選択して 1 つずつ出力してページに表示するとどうなるでしょうか。上にマークされた 4 つの単語を見たとき、2 つの単語が頭に浮かびましたか?サイクル
$.each(files, function (key, value) { //TOTO 何か });上記で取得したファイルをループすることで、各ファイルの情報を順番に取得できます。このようにして、次々に出力できるだけでなく、必要に応じて天国に送ることもできます〜
var fileReader = new FileReader();//FileReader オブジェクトをインスタンス化します var file_ = files[key];//現在のファイルを取得します if (/^image///w+$/.test(file_.type)) {//現在のファイルに対して定期的なマッチングを実行し、それが選択された画像であるかどうかを確認します。 fileReader.onload = function() {//読み取り操作が完了すると呼び出されます} }FileReader の知識ポイントを拡張する必要があります。
FileReader は主に、一連の非同期インターフェイスを通じてファイルの内容をメモリに読み取るために使用され、メイン スレッドでローカル ファイルにアクセスできます。
FileReader オブジェクトを使用すると、Web アプリケーションはユーザーのコンピューターに保存されているファイル (または生データ バッファー) の内容を非同期的に読み取ることができます。File オブジェクトまたは Blob オブジェクトを使用して、処理するファイルまたはデータを指定できます。
話に戻りますが、ファイルを取得して戻り値を取得することができたので、現時点では返された結果を表示するだけです。
$(#clubInputImagePreview).css(background-image, url( + this.result + ));
this.result を出力して、それが何であるかを確認してみましょう。
画像はBase64データ形式に変換されるのは言うまでもない。最後に、readAsDataURL を呼び出してファイルの内容を読み取り、それを data:url 文字列として表します。
fileReader.readAsDataURL(value);
このようにして、簡単な画像アップロードのデモを取得できますが、まだ多くの作業を追加する必要があるため、これは最終的なものではありません。たとえば、プレビュー画像を取得した後、次回ループして元のラベルを直接使用すると、前の画像が間違いなく置き換えられます。表示を置き換えるのではなく、順番に表示できます。したがって、まだいくつかの処理を行う必要があります。
$(#clubInputImagePreview).css(background-image, url( + this.result + ));//apend を使用して、現在の要素の下に子ノードを追加します $(#clubInputImagePreview) .append(<img src='/Images / registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />);//after を使用して現在の兄弟ノードに兄弟ノードを追加します $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img - プレビュー-sm delImg' ></div>);
次に、削除した画像を追加するときに、現在のプレビュー領域を非表示にするためにクリック イベントを与える必要もあります。
$(#ImgRemove).click(function () { $(this).parent().remove();});最終的には、現在の ID がまだ存在しているため、結果が望ましくないことがわかります。そのため、現在の要素の ID を削除して追加するだけで済みます。要素が同じ ID を持つため、ブラウザはこれが新しい要素であると認識します。
$input.removeAttr(id); var newInput ='<input type=file accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>';
最終的な完全な JS コードは次のとおりです。
var intP = 0; $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload);// console.log($input); $input.on(change, function () {// console.log(this); var files = this.files; var length = files.length; if (intP > 8) {layer.msg('これ以上の写真はありません~', {}); } $.each(files, function (key, value) { var fileReader = new FileReader(); var file_ = files[key]; if (/^image///w+$/.test( file_.type)) { fileReader.onload = function() { if (intP > 8) {layer.msg('もう写真はありません~', {}); if (key == 0 &&) intP == 0) { console.log(this.result); $(#clubInputImagePreview).css(background-image, url( + this.result + )); $(#clubInputImagePreview) .append( <img src=' /Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />); $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg'> }; else { $(#clubInputImagePreview + parseInt(intP) + ).css(background-image, url( + this.result + )); $(#clubInputImagePreview + parseInt(intP) + ).append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove + parseInt( 1) + parseInt(intP)) +' />); $(#clubInputImagePreview + parseInt(intP) + ).after( <div id='clubInputImagePreview + parseInt(parseInt(1) + parseInt(intP)) + 'class='col-sm-9 img-preview img-preview- sm delImg' ></div>); } if (key == 0 && intP == 0) { $(#ImgRemove).click(function () { $(this).parent().remove(); }); } else { $(#ImgRemove + parseInt(parseInt(1) + parseInt(intP)) + ) .click(function () { $(this).parent().remove(); }); } intP += parseInt(1); fileReader.readAsDataURL(value); } else {layer.msg(フォーマットエラー<br/>画像ファイルを選択してください) } }); $input.removeAttr(id); file accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>'; $(this).append($(newInput)) });要約する上記は、編集者によって導入された単一および複数の画像アップロード機能の HTML5 実装です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。