ユゲタです。
「ファイルアップロード」とかけまして、
「結婚相談所に言っている人」と、ときます。
そのココロは・・・
タイプ（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にしているので、お好きにお使いください。
0 件のコメント:
コメントを投稿