

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)

[code]

    <?php echo Asset::js('cropper.min.js'); ?>
    
[/code]

view

[code]

    <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>
    
[/code]

javascript

[code]

    $('#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) {
                        // 処理
                    }
                });
            }
        });
    });
    
[/code]

サーバー側(Fuelphp)

[code]

    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);
        }
    }
    
[/code]

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

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

[code]

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

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


CC BY-SA 3.0
2016-06-11T08:52:24.670
26654
2016-10-06T08:24:21.707
2016-07-26T09:23:50.220
5519
16816
question
jquery ajax fuelphp
画像を選択した後、再度違う画像を選択しても画像が変わらない


$('#profileImg')のvalueには最初に選択した画像が残っていると思います。  
キャンセルする場合は、処理の最後に、それを空にする必要があるのではないでしょうか？


CC BY-SA 3.0
2016-07-26T05:55:13.310
27852
2016-07-26T05:55:13.310
17289
26654
answer


cropper側で前回の結果が保持されているように見えます。  
画像を差し替える前に初期化を行ってみてはどうでしょうか？

[code]

                // ＝＝＝＝＝＝＝＝＝初期化処理を追加＝＝＝＝＝＝＝＝＝＝＝
                $('#target').cropper("destroy");
    
                // 保存したファイルパスを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) {
                        // 処理
                    }
                });
    
[/code]


CC BY-SA 3.0
2016-10-06T08:24:21.707
29388
2016-10-06T08:24:21.707
19001
26654
answer