質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

【jquery】アップロードでファイル保存した画像が表示されない【ajax】

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,106

youthK

score 70

わからないこと

いつもお世話になっております。
この度ajaxを使ってディレクトリ保存した画像を、そのディレクトリを辿って取ってきて表示させようとしているのですが、うまくいっておりません。
デベロッパーツールでsrcを一度変更し、戻したところ表示されるような状態です。
どうすればアップロードした段階で表示されるようになりますでしょうか。

ご教授いただければ幸いです。

$(function(){
        var $fileList = $('#file_list');
$fileList
        //画像がアップロードされた時の処理
        .on('change.inputFile', '.input_file', function(e){
            //画像が3つになった場合にinputタグを非表示にする処理
            //上にも同じコードがあるのでまとめた方がいいのですが...
            var $fileListLI = $('#file_list li label input[name=img_file]');
            var inputFileNum = $fileListLI.length;
            var lastInputFile = $fileListLI.eq(-1);
            // entrant_id取得
            var id = $("#id").val();
            if (inputFileNum == 4){
                $(lastInputFile).hide();
            }
            //Ajaxで飛ばすdata(FromDataオブジェクト)を生成する処理
            var fd = new FormData($('#cv_form').get(0));
            //最後から2番目のinputタグを拾う処理
            //画像が選択されるinputタグは必ず最後から2番目
            var targetFile = $fileListLI.eq(-2);
            //1画像毎のUPなので[0]、複数である場合は[1][2]...
            fd.append("file", $(targetFile).prop("files"));
            $.ajax({
                url: "{{action('PortalController@spimgupload')}}",
                type: 'POST',
                dataType: 'html',
                data: fd,
                processData: false,
                contentType: false
            })
            // 失敗時
            .fail(function(jqXHR, statusText, errorThrown){
                console.log(jqXHR);
                alert('エラー発生');
            })
            // 成功時
            .done(function(data, textStatus, jqXHR){
                console.log(textStatus);
                if(textStatus == 'success') {
                    alert('succccccceeeeeeessssss!!');
                    return true;
                } else {
                    alert(data);
                    return false;
                }
            });
            var $input = $(this),
            $li    = $input.closest('.each_file'),
            $newLi = $li;
            $fileList.append($newLi);
            //サムネイル画像を表示する処理
            var file = e.target.files[0],
            fileName = file.name;
            //FileReaderオブジェクトの生成
            reader = new FileReader();
            reader.readAsDataURL(file);
            // 経歴書の表示
            var imgUrl = '{!!url("/img/career_paper/cv/' + id + '/' + fileName + '")!!}';
            reader.onloadend = function(){
                var fileReader = this;
                if(fileReader.result && imgUrl){
                    $('#showImg{{$i}}').show();
                    var thumb = '<div style="margin: 15px 10px 0 10px;width:145px;float: left;" class="thumbnail box"><a href="' + imgUrl + '" class="swipebox"><img src="' + imgUrl + '" width="145px" height="150px" style="max-width: 145px; max-height: 150px;height: -webkit-fill-available;margin-top:5px;" alt="{{$i}}"><input type="hidden" name="id" value="{{request()->input('id')}}"><input type="hidden" name="filename" value="' + imgUrl + '"><span style="width: 70px; height: 19px; text-align: center; margin-top: 5px;margin: 0 auto;float: left;" class="del-button ui-opaimg">確認</span></a><span style="width: 70px; height: 19px; text-align: center; margin-top: 5px;margin: 0 auto;float: right;" class="delete_btn del-button ui-opaimg">削除</span></div>';
                    $li.append(thumb);
                }
            };
            $input.hide();
        });
    });
public function spimgupload() {
        // entrant_idの取得
        $filePathName = request()->input('id');
        $i = 0;
        // 圧縮するファイルの配列
        $files = $_FILES['img_file']['tmp_name'];
        $fileName = $_FILES['img_file']['name'];
        // 拡張子の取得
        $ext = pathinfo($fileName[0], PATHINFO_EXTENSION);
        // ファイルパスの取得
        $filePath = public_path("img/career_paper/cv/{$filePathName}");
        if(!file_exists($filePath)) {
            mkdir($filePath, 0777);
        }
        // 文字化け防止
        $data = file_get_contents($files[0]);
        // フォルダにファイルを格納
        file_put_contents($filePath.'/'.$fileName[0], $data);
    }
<ul id="file_list">
            <li class="each_file">
                <label style="text-align: center; width: 150px; margin: 0 auto; padding: 10px;" class="bt-photo02 ui-bt-nomal ui-opaimg">経歴書を添付する
                    <input type="file" id="uploadName" class="input_file" name="img_file[]" value="経歴書をアップロード" accept="image/*;capture=camera" style="display:none;">
                    <input type="hidden" id="id"name="id" value="{{request()->input('id')}}">
                </label>
</li>
        </ul>

よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2018/01/27 11:40

    エラーメッセージをご提示ください。

    キャンセル

回答 1

checkベストアンサー

+2

コードを見ると、var $input = $(this),から始まる画像を追加する処理が.on().done()の中に記述されていないため、アップロードする前にHTMLに要素が追加されるのではないかと思います。
なので、var thumb = 'あたりのコードは.on().done()から呼び出されるようにしないといけないと思います。ただ、FileReaderも非同期なので、もしかしたらwhenで書いたほうがいいかもしれませんね。
 
 
 
蛇足ですが。
私なら、このような構成にせずに「PHPから画像のパスをレスポンスで返し、それを受け取って画像の要素を追加する」ように書くと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/27 20:09

    ご回答ありがとうございます。
    返事が遅れて申し訳ありません。
    アドバイスありがとうございます
    そちらも参考にして組み直すことを検討したいと思います!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる