使用することでドラッグ&ドロップでの複数ファイルの取得や、ローカルファイルのちょっとした加工などができるようになりました。この記事では、画像とテキストファイルを簡単に表示する方法をご紹介します。ファイルをドロップしてください。class="out"></div></div>cssでドロップするdivを大きくしておくと良い感じだと思います。jQueryを使用しなくても使えますが、要素の操作とかが大変なのでここではjQueryを使用します。通常のブラウザの動作はファイルをドロップするとそのまま開く処理になってしまいます。「dragover」「drop」「dragenter」のイベントに「preventDefault」を設定することで開く処理を無効にできます。ここにドロップ後の処理を書く});});</script>最初にドロップされたファイルの情報を取得します。「drop」イベントを次のように変更します。e.originalEvent.dataTransfer.files;console.log(files);});これでファイルをドロップされたファイルの情報が「files」に入ります。「files」は配列になってますので、実際には「files[0]」などして各ファイルを扱います。ファイルの種類を判別ファイルを読み込んだら、テキストなのか、画像なのか判別する必要がありますね。ファイルの種類は「type」に入ってますので、「jpg」だけ扱いたい場合は次のような条件分岐になります。{console.log(files[i].type);}}画像を全て扱う画像は「jpg」の他にも「png」だったり「gif」だったりしますね。ファイルタイプは画像なら最初に「image」が入りますので、とにかく画像を扱いたいという場合は「image.*」でマッチさせます。{console.log(files[i].type);}ドロップした画像を表示するファイルの取り込み方がわかったので、次は取り込んだファイルに対して何か処理をしてみましょう。簡単に画像を表示するだけの処理をしてみます。読み込み後の処理をします。テキストファイルの文字を表示する次はテキストファイルの文字を表示してみます。第2引数には文字コードを指定します。指定しない場合にはソースの文字コードになるようです。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。