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

2020年3月13日

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

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

概要

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

何ができるの?

基本的には、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にしているので、お好きにお使いください。

このブログを検索

プロフィール

自分の写真
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出で、出来高は無限大です。

ブログ アーカイブ

QooQ