June 6, 2013

FuelPHPで非同期ファイルアップロード

追記:
続き書きました。
FuelPHPで画像を選択、表示、範囲選択、アップロード、切り取った画像の表示を画面遷移なしでやる
http://madroom-project.blogspot.jp/2013/06/httpmadroom-project.html

--

今回はFuelPHPはあまり関係ありませんが、続きとして書く(予定)の記事で関係するので。。。

コントローラとビューを用意します。

classes/controller/file.php
<?php

class Controller_File extends Controller
{

    public function action_index()
    {
        return Response::forge(View::forge('file/index'));
    }

    public function action_upload()
    {
        // TODO: 実際にはtokenも送信してチェックすべき
        return print_r($_FILES, true);
    }
}
views/file/index.php
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
    
<input id="file" type="file" />
<button id="upload" disabled="disabled">Upload</button>

<script>
var file;
$('#file').change(function(e) {
    file = e.target.files[0];
    $('#upload').attr('disabled', false);
});
$("#upload").click(function() {
    $(this).attr('disabled', true);

    var formData = new FormData();
    formData.append('file', file);

    $.ajax({
        url: '<?php echo Uri::create('/file/upload'); ?>',
        type: 'post',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            console.log(res);
        }
    });
});
</script>

</body>
</html>
試しにファイルを選択してアップロードボタンを押してコンソールを確認すると
非同期にアップロードされているのがわかります。

冒頭で書いた"続き"は
* 選択したファイル(画像)を表示
* 切り取る(範囲選択する)
* アップロードボタンを押す
* FuelPHP側で選択範囲で切り取って表示
みたいな内容(のはず)です。


P.S.
上記の内容はWin/MacのChromeで確認しています。IE9では動かないっぽいです。

No comments:

Post a Comment