<input type="file">でディレクトリを丸ごと送信したい、を実装

PHPで簡単にHPをアップロードできるシステムを作ってみたいと思った。初めはエクスプローラみたいに操作できるものを考えたんだけど、思いのほかめんどそうなので、とりあえずフォルダをごっそり上げる仕組みにしたいと思った。

そんで差分ファイルだけ上げて上書きするような感じで。そうすると要らなくなったファイルも残っちゃうけど、それは別途削除の仕組みを作ってあげた方がいいような気がした。

必要なのはPHP実行環境と、ファイルかフォルダを指定できるインターフェイスのみかな。ただアップするだけなのでそんなに問題があるとは思わないんだけど、実装するには一工夫必要であった。

・ファイル一つを上げる

http://www.isl.ne.jp/pcsp/php/contents_10.html

・ディレクトリごと
<input type="file">でディレクトリを丸ごと送信したい
https://qiita.com/akase244/items/f5f7287cfe28bebe00fc

クライアント側で「webkitRelativePath」というファイルオブジェクトのプロパティが取得可能なので、これをPOSTデータに含めて一緒に送信し、サーバー側でゴニョゴニョしてあげると良いと思います。

これを実際にやったのが下のGithubのファイルです。

https://github.com/miffy/php-one-file-uploader
https://github.com/miffy/php-one-file-uploader/blob/main/upload.php

readmeにいろいろ書いてあるので、そちらを読んでいただければ情報を得られるとは思いますが、こっちでも解説しておきますね。

まず使うにはPHPを実行できるディレクトリにアップロードします。そのファイルをWebブラウザから見るとディレクトリの設定するボタンがあるので、そこで自分の上げたいディレクトリを設定して、ボタンを押すだけでファイルが上がります。実験的に行っているので問題はありありなのですが、一応できるという事を示したかったので、簡潔に見られるようにはなっています。

内容を簡単に説明すると、HTMLの

<input type="file" name="upfile[]" webkitdirectory>

でディレクトリの情報を取ることができます。Submitすると指定した中のファイルが、Webサーバのテンポラリディレクトリにアップロードされます。

でもただそれだけだと、ファイルを複数送信しただけで、違うディレクトリにある同名のファイルは上書きになるので、ローカルでのディレクトリ構成を別に上げてテンポラリからコピーするときに名前を付けて各ディレクトリごとのコピーを行います。

結局、$_FILESの中に入れ込んでくれればいいものの、その情報はローカルでwebkitRelativePathで取れるものの、意図的に送り込んでやらないとダメなのでした。なので$_POSTに入るように別途送ってあげるようにしています。実際にはfuncBtn()の部分ですね。実証コードだったので、動くサンプルをそのままコピペしてきていて変数の名前とかが適当です。

JSONで送ることも考えましたが、めんどうなのでJavaScriptでカンマで区切って、PHPでexplode()で受け取っています。基本、どちらの順番も同じだと思うので、そのまま配列の番号は合っていると思います。

しかし、php-one-file-uploaderだとファイルが一個しか上がらない感じがしてしまうな。PHPファイル一つでいっぺんにディレクトリをアップロード可能というところ言いたかったんだけど、英語的にも伝わらない気がした。

タグ：PHP