ファイルアップロードの決定版「UPLO」

2020年3月13日

テクノロジー プログラミング

ユゲタです。 「ファイルアップロード」とかけまして、 「結婚相談所に言っている人」と、ときます。 そのココロは・・・ タイプ(file-typeと、好みのタイプ)に左右されます。

概要

以前公開したファイルアップローダライブラリは、image,sound,videoがそれぞれ別々のライブラリとして構成されていたのですが、 どうやら、別の種類のファイルを、同じアップロードで、行いたいというニーズがあることに気が付き、 (自分で作業しているプロジェクトで発生したので) それらをまとめたライブラリを新規作成してみました。 ※以前のライブラリ紹介記事 fileuploadライブラリにVideoファイルの追加

何ができるの?

基本的には、WEBサービスなどを構築する際に、ファイルアップロードが非常に面倒くさい処理になるので、それを簡単に行えるようにするライブラリです。 基本的に「画像ファイル」「音声ファイル」「videoファイル」と「それ以外のファイル」というタイプ別にアップロードすることができ、拡張子で自動判別するようになっています。 画像ファイルは、画像の向き回転、トリム機能がついており、アップロードする前に調整したデータを構築でき、 音声ファイルは、id3タグのデータを自動で読み取ることができます。 videoファイルは、アップロードの際に、内容を確認するプレビュー機能がついているだけなのですが、大きなファイルのアップロードミスを防ぐことが可能です。 それ以外のファイルは、そのままサーバーに送ることができるので、必要がない場合は、設定で防ぐことも可能です。

github

https://github.com/yugeta/uplo まずは、githubからcloneしてすぐに使い始められます。

使い方

githubにも搭載されているsample/index.htmlのソースです。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>UPLO</title> <script src="../src/uplo.js" class="uplo"></script> </head> <body> <h1>UPLO-File-Uploader</h1> <button id="btn" type="button">pickup-file</button> <!-- <input type="text" name="test"> --> <script> new $$uplo({ url : "upload.php", querys : { }, max_size : "20M", flg_icon_comment : true, // extensions : ["mp3"], // 指定拡張子一覧(必要なもののみセット可能) btn_selector : "#btn", file_select : (function(e){ // console.log(e) // console.log(this.options); }).bind(this) }); </script> </body> </html> ページ読み込み語に"new $$uplo()"で、起動してください。 その時に、送り値としてのoptionは以下の通りです。 // 設定内容 url : "***.php" //データ送信先のcgi btn_selector : "#uplo" // クリックするボタンのselectors(複数対応) // 画像アップロード前のプレビュー用 max_size : null // アップロードできる最大容量 (数値を入れると制限される , 1,1k,1m,1g) contentTypes : [] // アップロードできるmimeタイプのホワイトリスト(登録がない場合は全ファイルアップロード可能) css_path : null // 表示系cssの任意指定(デフォルト(null)は起動スクリプトと同一階層) file_multi : true // 複数ファイルアップロード対応 [ true : 複数 , false : 1つのみ] flg_icon_comment : null // 画像編集のコメント機能アイコン(デフォルト(null)は起動スクリプトと同一階層) img_trim_button : true // 機能(アイコン)表示フラグ(画像用) flg_icon_rotate : true flg_icon_trim : true // post-data querys : {} // input type="hidden"の任意値のセット(cgiに送信する際の各種データ) postStringFormat : "" // post-string-format ["":HTML-ENTITIES , encode:encodeURIComponent(php->urldecode())] // comment欄 comment : { placeholder : "Comment..." } file_select : function(res){} // ファイル選択直後の任意イベント処理 post_success : function(res){} // 1ファイルファイル送信完了後の任意イベント処理 post_finish : function(res){} // すべてのファイル送信完了後の任意イベント処理 post_error : function(res , options){ console.log("Error ! " + (res ? res : "")); } // ファイル送信エラーの時の任意イベント処理 // システム用(変更しないでください) scriptname : "uplo" prefix : "uplo" // 他システムと名前が同じ場合に変更します。 id : null // インスタンス(送信用とする)識別子 : システム利用用(設定不可) count : null // 送信する画像の総合枚数(送信ボタンを押すと確定) : システム利用用(設定不可) cacheTime : null // システム利用用(設定不可) currentPath : null // システム利用用(設定不可)

注意点

データ送信先は、phpファイルじゃなくてもOKです。 phpの場合を想定して、サンプルコードもphpフォルダに格納しているので、 必要な方は参照、コピペして使ってください。 ファイルアップロードする容量をoptionで設定できますが、受け取り側のサーバーでの設定も必ず行っておくようにしましょう。

ライセンス

MITにしているので、お好きにお使いください。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。