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