AjaxでファイルをアップロードするjQueryプラグイン「jQuery.upload」

AjaxでファイルをアップロードするjQueryプラグイン「jQuery.upload」

Posted at August 31,2012 12:55 AM
Tag:[jQuery, upload]

AjaxでファイルをアップロードするjQueryプラグイン「jQuery.upload」を紹介します。

jQuery.upload
jQuery.upload

1.機能

フォームのファイルアップロード実行に「jQuery.upload」プラグインを利用することで、Ajaxによるファイルのアップロードが行えるようになります。

以下のサンプルでお試しください。

サンプル

2.プラグインのダウンロード

jQuery.uploadのダウンロードページにある、「jQuery.upload 1.0.2 (Minified)」または「jQuery.upload 1.0.2」を右クリックして「名前をつけて保存」を選択(バージョン1.0.2は2012年8月現在のもの)。

jQuery.upload

「jquery.upload-1.0.2.min.js」や「jquery.upload-1.0.2.js」といったファイル名で保存します。

3.プラグインの設定

クライアントのHTMLマークアップとjQueryのコードは次のようになります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.upload-1.0.2.min.js" type="text/javascript"></script>
<script>
$(function(){
    $('input[type=button]').click(function() {
        $('input[type=file]').upload('http://user-domain/upload.php', function(res) {
            alert('ファイルをアップロードしました:' + res.filename);
        }, 'json');
    });
});
</script>
<input type="file" name="upload" />
<input type="button" value="アップロード" />

upload()のフォーマットは次の通りです。

upload(url, callback, type);

第1パラメータにはアップロード時に実行するサーバのURL、第2パラメータはレスポンス用のコールバック関数、第3パラメータにはレスポンスデータの形式を指定します。

下はサーバ(PHP)のサンプルコードです。

$filename = basename($_FILES['upload']['name']);
if (move_uploaded_file($_FILES['upload']['tmp_name'], '/home/www/foo/images/' . $filename)) {
    $data = array('filename' => $filename);
} else {
    $data = array('error' => 'Failed to save');
}
header('Content-type: text/html');
echo json_encode($data);

basename()はアップロードしたファイルのファイル名を取得します。move_uploaded_file()は、第1パラーメータで指定したファイルを第2パラメータのパスに保存します。

サンプルの第1パラメータ「$_FILES['upload']['tmp_name']」は、フォームデータを指定しています。input要素のname属性値「upload」を指定します。「tmp_name」はファイルデータを取得する場合の値になります。

JSONデータを返却することで、クライアントに情報をわたすことができます。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)