WEBサイトでページ遷移をせずにファイルをアップロードする方法(サンプルソース付)

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

インターネットサイトを作った時に、データをアップロードする仕様にしたい場合、inputタグのtype=”file”を使って、パソコン内のデータをアップロードできます。
 

その際に、PWAを意識したようなシステムであったり、何かしらのインタラクティブ性の高いWEBサイトの場合、submitした後で、ページのloadingが入ってしまうのがよろしくない場合があります。
 

そんな時に使えるテクニックを紹介します。

こんな時に使える

1. 画像リストを表示しているようなサイトで画像アップロードをする時に、毎回ページを再ロードされたくない場合。
 

2. 縦に長い情報量の多いページで、表示編集するような機能を追加して、文中に画像を挿入するような仕様を設けた場合
 

3. メールサービスのような機能をWEBブラウザで作った場合、添付ファイルなどをデータ送信する場合に、ページをリロードしないようにサーバーにアップロードさせたい場合
 

ソースコード

下記4ファイルを同じ階層に設置し、phpが利用できる環境でindex.htmlにアクセスすると、アップロードができるようになります。

使い方

1. 対象のページに下記2ファイルを設置

upload.js
upload.php

 

2. HTMLにjsファイルをscriptタグで記述

 

3. アップロードを行うボタンを設置
ボタンのclass名に「data-upload」を追加
 

解説

動作 : アップロードされたファイルは「upload」フォルダが自動で作られてそこに格納されます。
 

カスタマイズ : デフォルトで複数ファイルのアップデートができるようになっていますが、upload.jsファイルの冒頭customの”uploadFileMulti”をtrueからfalseに切り替えると、単一ファイルだけしかアップロードできなくなります。
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です