TwitterやFacebookなどでよく見かける、プロフィール画像の変更で画像を切り抜いて登録するという機能を作りたいと思っています。切り抜いて画像を登録するという処理は、検証不十分ではありますが一旦実装できたのですが、１点うまく実装できない点があります。

◼︎やりたいこと

1.画面でプロフィール用の画像を選択

2.ファイル選択で画像を選択した際にchangeイベント実行

3.ajaxで選択した画像をサーバー側へPOST送信

4.サーバー側で受け取った画像をtmpフォルダへ保存

5.tmpフォルダのpathをresponse

6.successの処理でtmpのpathをプロフィール画像のimageタグへセットする

7.tmpフォルダの画像をbootstrapのmodalで表示

8.画像を変更したいため、modalでキャンセルボタン押下

9.再度違う画像を選択 → 1.へ戻る

◼︎実現できなくて困っている点
上記の一連の処理を実装し、7.までの処理は正常に動作していますが、8.9.を操作しても画像が変わらず、最初に選択した画像のままとなってしまいます。

◼︎ソースコード
インポートライブラリ(cropper.js)

<?php echo Asset::js('cropper.min.js'); ?>

view

<div>
    <input type="file" id="profileImg" name="">

    <div id="modal" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">プロフィール写真の範囲を選択</h4>
          </div>
          <div class="modal-body">
              <img src="" id=target" alt="" title="" />
              <p>error message</p>
          </div>
          <div class="modal-footer">
              <button id="close_pi" type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
            <button id="applied" type="button" class="btn btn-primary">適用</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

javascript

$('#profileImg').change(function(e) {

    file = e.target.files[0];

    var formData = new FormData($('#pi-form').get(0));
    formData.append('profile_img', file);

    $.ajax({
        url: '<?php echo $url['uptmp'] ?>',
        type: 'post',
        data: formData,
        processData: false,
        contentType: false,
        dataType: 'json',
        success: function (data) {

            // 保存したファイルパスをinput fileのsrcへセットする
            $('#target').attr('src', data['saved_as']);

            // modalの表示
            $('.modal').modal('show');

            // cropper.jsの設定
            $('#target').cropper({
                aspectRatio: 1,
                guides: false,
                background: false,
                crop: function(e) {
                    // 処理
                }
            });
        }
    });
});

サーバー側(Fuelphp)

public function post_uptmp()
{
    $data = array('saved_as' => '',  'msg' => '');

    $input_file = Input::file();

    $upload_path = Config::get('base.dir_profile').DIRECTORY_SEPARATOR.'tmp';
    $upload_config = self::$UPLOAD_CONFIG + array('path' => $upload_path);

   // バリデーション
    $validation = $this->create_validation($upload_config, $input_file);
    if (!$validation->run())
    {
        // エラーの場合
        $data['msg'] = $validation->error_message();
        return $this->response($data, 400);
    }
    else
    {
        $util = new Util_Photo(); // 独自で作成したクラスです
        $result = $util->photo_upload($upload_config); // tmpフォルダへアップロードする処理を記述しています

        // tmpファイルのpathを取得して$data['saved_as']へ格納しています
        $data['saved_as'] = self::$BASE_Folder.DIRECTORY_SEPARATOR.'tmp'.DIRECTORY_SEPARATOR.$result['file_data']['saved_as'];

        return $this->response($data, 200);
    }
}

※他のライブラリのJCropというライブラリで試みてみたのですが同様の事象となりました。

※上記コードjavascriptの以下の部分をコメントアウトすると「やりたいこと」で記載した8.9.の手順を操作して正常に画像が変更した画像に変わりました。

            // cropper.jsの設定
            $('#target').cropper({
                aspectRatio: 1,
                guides: false,
                background: false,
                crop: function(e) {
                    // 処理
                }
            });

◼︎開発環境
フレームワーク： Fuelphp
jquery： jquery-2.2.4
DB： MySQL
ブラウザ： Google Chrome、Safari
端末： MacBook Air、OS X 10.11.5