ラボ > PHP:ファイル関連、Javascript関連

PHP・jqueryでファイルを大容量のファイルをアップロード(jQuery-File-Upload)

そのままアップすると落ちる・・・。メモリの割り当て変更がNGのとき。jQuery-File-Uploadってのを使うとき。

作成日:2018-05-01, 更新日:2019-01-08

基本

・ファイルを適当に分割して、アップロード
・サーバ側で分割されたファイルを取得して合体させる
ってのが基本的な動作。

考えるのが面倒だし、すでに準備してくれている人達がいるので、それを利用する。

jQuery-File-Upload

▼jQuery-File-Uploadのサイトのデモ
jQuery File Upload Demo(Basicバージョン以外にも色々と用意されている。)

最小限のファイル構成

ダウンロードして試したいんだけど、こういうのって、余計なファイルが多いから困る。

上記サイトの「Basic Plus」ってヤツの最小構成(jquery.fileuploadは、アップロード対象外にするファイルは省いても良さげ)

  • css/jquery.fileupload.css
  • js/vendor/jquery.ui.widget.js
  • js/
    • jquery.iframe-transport.js
    • jquery.fileupload.js
    • jquery.fileupload-process.js
    • jquery.fileupload-image.js
    • jquery.fileupload-audio.js
    • jquery.fileupload-video.js
    • jquery.fileupload-validate.js
  • img/
    • loading.gif
    • progressbar.gif
  • server/php/
    • files/.htaccess
    • index.php
    • UploadHandler.php
  • basic-plus.html

画像をアップした場合は、下記のような感じになるっぽい。
1.「basic-plus.html」でファイルをアップさせると「jquery.fileupload.js」あたりを使って、サーバに送信
2.「server/php/index.php」が「server/php/UploadHandler.php」を使って「server/php/files」にファイルを保存。
3.サムネイル画像は「server/php/files」の中に「/thumbnail」を作って、保存してくれる。

up可能なファイル容量の上限を変更

ini_set()は効かないそうだ。
※php.ini、httpd.confを変更する方法もあるけど、サーバの設定変更は避けたいので「.htaccess」の修正方法のみ。

▼「.htaccess」に追加

php_value upload_max_filesize "8M"

イベント

詳しくは公式を見る。

流れ的には・・・
1.ファイルを追加→プレビュー作成
2.サーバにup
※「1」「2」のタイミングで追加したファイルを削除

▼ファイル数制限アリで処理を追加したいときに監視すれば良さげイベントたち
・fileuploadadd
・fileuploaddrop
・fileuploadadded
・fileuploaddestroyed

Callback Options

$('#fileupload')
    .bind('fileuploadadd',             function (e, data) {/* ... */})  // ファイルをドラッグ&ドロップのドロップしたあと
    .bind('fileuploadsubmit',          function (e, data) {/* ... */})  // サーバupしようとしたとき
    .bind('fileuploadsend',            function (e, data) {/* ... */})  // 
    .bind('fileuploaddone',            function (e, data) {/* ... */})  // 
    .bind('fileuploadfail',            function (e, data) {/* ... */})  // 
    .bind('fileuploadalways',          function (e, data) {/* ... */})  // 
    .bind('fileuploadprogress',        function (e, data) {/* ... */})  // 
    .bind('fileuploadprogressall',     function (e, data) {/* ... */})  // 
    .bind('fileuploadstart',           function (e)       {/* ... */})  // 
    .bind('fileuploadstop',            function (e)       {/* ... */})  // 
    .bind('fileuploadchange',          function (e, data) {/* ... */})  // 
    .bind('fileuploadpaste',           function (e, data) {/* ... */})  // 
    .bind('fileuploaddrop',            function (e, data) {/* ... */})  // ファイルをドラッグ&ドロップのドロップしたとき
    .bind('fileuploaddragover',        function (e)       {/* ... */})  // ファイルをドラッグ&ドロップのドラッグ中
    .bind('fileuploadchunkbeforesend', function (e, data) {/* ... */})  // 
    .bind('fileuploadchunksend',       function (e, data) {/* ... */})  // 
    .bind('fileuploadchunkdone',       function (e, data) {/* ... */})  // 
    .bind('fileuploadchunkfail',       function (e, data) {/* ... */})  // 
    .bind('fileuploadchunkalways',     function (e, data) {/* ... */}); // 

Processing Callback Options

$('#fileupload')
    .bind('fileuploadprocessstart',  function (e)       {/* ... */})  // 
    .bind('fileuploadprocess',       function (e, data) {/* ... */})  // 
    .bind('fileuploadprocessdone',   function (e, data) {/* ... */})  // 
    .bind('fileuploadprocessfail',   function (e, data) {/* ... */})  // 
    .bind('fileuploadprocessalways', function (e, data) {/* ... */})  // 
    .bind('fileuploadprocessstop',   function (e)       {/* ... */}); // 

Additional Callback Options for the UI version

$('#fileupload')
    .bind('fileuploaddestroy',   function (e, data) {/* ... */})  // ファイル削除しようとしたとき
    .bind('fileuploaddestroyed', function (e, data) {/* ... */})  // ファイル削除完了
    .bind('fileuploadadded',     function (e, data) {/* ... */})  // ファイルの追加完了後:サムネイル作成→プレビュー完了(サーバupはしていない)
    .bind('fileuploadsent',      function (e, data) {/* ... */})  // ファイルをサーバにup
    .bind('fileuploadcompleted', function (e, data) {/* ... */})  // ファイルをサーバup成功→プレビュー完了(?)
    .bind('fileuploadfailed',    function (e, data) {/* ... */})  // 
    .bind('fileuploadfinished',  function (e, data) {/* ... */})  // ファイルのサーバup完了(fileuploadcompletedの後)
    .bind('fileuploadstarted',   function (e)       {/* ... */})  // 
    .bind('fileuploadstopped',   function (e)       {/* ... */}); // ファイルupの一連の処理完了後

メモ

・ドラッグ&ドロップ対応
・ディレクトリのドラッグ&ドロップも対応
・プレビューを飛ばして即アップさせるには、「autoUpload」を「true」で設定
・ファイル数の制限の設定可能
・各制限関連は、JS側とPHP側で処理を入れる(※PHP側の処理の有無に関しては管理人の考え方次第)

関連項目

PHP+FORM(ファイルあり)の処理の流れ