http://madroom-project.blogspot.jp/2013/06/fuelphp.html
尚、動かすのに最低限な内容なので、アップロードされるファイルは画像が大前提だったり、トークンやアップロードされたファイルのチェック等は割愛していますm(_ _)m
(それでも結構長くなってしまいますね。。。)
--
Jcropをダウンロードします。
http://deepliquid.com/content/Jcrop.html
解凍したディレクトリを
public/assets/jcrop
として配置します。
コントローラは以下のようになります。
classes/controller/file.php
<?php
class Controller_File extends Controller
{
public function action_index()
{
Asset::add_path('assets/jcrop/css/', 'css');
Asset::add_path('assets/jcrop/js/', 'js');
return Response::forge(View::forge('file/index'));
}
public function action_upload()
{
Upload::process(array('path' => APPPATH.'tmp'));
Upload::save(0);
$file = Upload::get_files(0);
$path = APPPATH.'tmp/'.$file['saved_as'];
$x = Input::post('x');
$x2 = Input::post('x2');
$y = Input::post('y');
$y2 = Input::post('y2');
Image::load($path)->crop($x, $y, $x2, $y2)->save($path);
return $file['saved_as'];
}
public function action_image($file = null)
{
Image::load(APPPATH.'tmp/'.$file.'.'.Input::extension())->output();
}
}
ビューは以下のようになります。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>
<?php echo Asset::css('jquery.Jcrop.min.css'); ?>
<?php echo Asset::js('jquery.Jcrop.min.js'); ?>
</head>
<body>
<input id="file" type="file" />
<button id="upload" disabled="disabled">Upload</button>
<img id="selected_img" />
<img id="uploaded_img" />
<script>
var file;
var img = $('#selected_img');
var coordinate;
$('#file').change(function(e) {
file = e.target.files[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
img.attr('src', e.target.result);
img.Jcrop({
onSelect: function(c) {
coordinate = c;
$('#upload').attr('disabled', false);
}
});
};
});
$("#upload").click(function() {
$(this).attr('disabled', true);
var formData = new FormData();
formData.append('file', file);
formData.append('x', coordinate.x);
formData.append('x2', coordinate.x2);
formData.append('y', coordinate.y);
formData.append('y2', coordinate.y2);
$.ajax({
url: '<?php echo Uri::create('/file/upload'); ?>',
type: 'post',
data: formData,
processData: false,
contentType: false,
success: function(file) {
$('#uploaded_img').attr('src', '<?php echo Uri::create('file/image/'); ?>' + file);
}
});
});
</script>
</body>
</html>
* JS: 画像を選択後、選択した画像が表示されます。
* JS: 画像の範囲選択をすると、アップロードボタンが押せるようになります。
* JS: アップロードボタンを押すと、非同期で画像をアップロードします。
* PHP: FuelPHP側で切り取って保存、ファイル名を返します。
* JS: 返されたファイル名から画像を表示します。
P.S.
IE9では動かないらしいです。(確認はしてないです。)その他、ブラウザによって動かない可能性は否定出来ません。(Chromeで確認しています。)
あと、input type fileにはBootstrapのデザインは当たりません。デザインするなら、以下のように、input type fileは非表示にしつつ、別のボタンでclickイベントを発生させる必要があります。
<input id="file" type="file" name="xxx" style="display: none;" />
<button class="btn" onclick="$('#file').click();" type="button">Change image</button>
No comments:
Post a Comment