画像やファイルをJavascriptからアップロードするプラグインをご紹介いたします。
jQuery.uploadを使えば、アップロードするための<form>の設置も不要。
最近主流となっているページ切り替えなしのファイルアップロードが可能です。
IEでも問題なく動作するのが大きいです。(本当にWeb制作に携わっているとIEのダメさが身にしみます)
「jQuery.upload.js」のダウンロードについて
下記よりダウンロードできます。
jQuery.upload.js
http://lagoscript.org/jquery/upload
■使い方
ご利用にはjQueryを使用します。
※jQueryはJavascriptのDOM要素を簡単に使用するためのJavascriptライブラリです。
1.jQueryとダウンロードしてきたjQuery.upload.jsを読み込みます。
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.upload.js" type="text/javascript"></script>
2.html上にアップロードするためのinput:fileを設置
<input name="upload_file" type="file" value="" /> <input id="upload_btn" name="upload" type="button" value="アップロード" />
3.イベントを追加
下記のソースをhead内に追加いたします。
<script type="text/javascript">// <![CDATA[ // jQueryでdocument読み込み完了 jQuery(document).ready(function(){ // ボタンが押されたとき jQuery("#upload_btn").click(function(){ jQuery('#upload').upload( 'upload.php', // 送信先 {type:'photo'}, // 同時にPOSTするデータ function (result) { jQuery("#results").html(result); }, 'text' // 戻り値の種類 ); }); }); // ]]></script>
アップロードボタンをクリックするとjQuery.uploadが呼び出されます。
jQuery.uploadの引数
jQuery(elm).upload(URL,DATA,CALLBACK,TYPE);
1.URL ・・・・ 送信先のURL
2.DATA ・・・・サーバに送信するデータ(配列、もしくはURL形式(“test=1&sample=2″など))
3.CALLBACK ・・・・送信後に呼び出される関数
4.TYPE ・・・・CALLBACKの引数の形式(‘json’,’text’,’xml’,’html’,’script’)で指定