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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1057閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/01/26 10:54

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

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

javascript

1 2$(function(){ 3 var $fileList = $('#file_list'); 4$fileList 5 //画像がアップロードされた時の処理 6 .on('change.inputFile', '.input_file', function(e){ 7 //画像が3つになった場合にinputタグを非表示にする処理 8 //上にも同じコードがあるのでまとめた方がいいのですが... 9 var $fileListLI = $('#file_list li label input[name=img_file]'); 10 var inputFileNum = $fileListLI.length; 11 var lastInputFile = $fileListLI.eq(-1); 12 // entrant_id取得 13 var id = $("#id").val(); 14 if (inputFileNum == 4){ 15 $(lastInputFile).hide(); 16 } 17 //Ajaxで飛ばすdata(FromDataオブジェクト)を生成する処理 18 var fd = new FormData($('#cv_form').get(0)); 19 //最後から2番目のinputタグを拾う処理 20 //画像が選択されるinputタグは必ず最後から2番目 21 var targetFile = $fileListLI.eq(-2); 22 //1画像毎のUPなので[0]、複数である場合は[1][2]... 23 fd.append("file", $(targetFile).prop("files")); 24 $.ajax({ 25 url: "{{action('PortalController@spimgupload')}}", 26 type: 'POST', 27 dataType: 'html', 28 data: fd, 29 processData: false, 30 contentType: false 31 }) 32 // 失敗時 33 .fail(function(jqXHR, statusText, errorThrown){ 34 console.log(jqXHR); 35 alert('エラー発生'); 36 }) 37 // 成功時 38 .done(function(data, textStatus, jqXHR){ 39 console.log(textStatus); 40 if(textStatus == 'success') { 41 alert('succccccceeeeeeessssss!!'); 42 return true; 43 } else { 44 alert(data); 45 return false; 46 } 47 }); 48 var $input = $(this), 49 $li = $input.closest('.each_file'), 50 $newLi = $li; 51 $fileList.append($newLi); 52 //サムネイル画像を表示する処理 53 var file = e.target.files[0], 54 fileName = file.name; 55 //FileReaderオブジェクトの生成 56 reader = new FileReader(); 57 reader.readAsDataURL(file); 58 // 経歴書の表示 59 var imgUrl = '{!!url("/img/career_paper/cv/' + id + '/' + fileName + '")!!}'; 60 reader.onloadend = function(){ 61 var fileReader = this; 62 if(fileReader.result && imgUrl){ 63 $('#showImg{{$i}}').show(); 64 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>'; 65 $li.append(thumb); 66 } 67 }; 68 $input.hide(); 69 }); 70 });

php

1public function spimgupload() { 2 // entrant_idの取得 3 $filePathName = request()->input('id'); 4 $i = 0; 5 // 圧縮するファイルの配列 6 $files = $_FILES['img_file']['tmp_name']; 7 $fileName = $_FILES['img_file']['name']; 8 // 拡張子の取得 9 $ext = pathinfo($fileName[0], PATHINFO_EXTENSION); 10 // ファイルパスの取得 11 $filePath = public_path("img/career_paper/cv/{$filePathName}"); 12 if(!file_exists($filePath)) { 13 mkdir($filePath, 0777); 14 } 15 // 文字化け防止 16 $data = file_get_contents($files[0]); 17 // フォルダにファイルを格納 18 file_put_contents($filePath.'/'.$fileName[0], $data); 19 }

html

1<ul id="file_list"> 2 <li class="each_file"> 3 <label style="text-align: center; width: 150px; margin: 0 auto; padding: 10px;" class="bt-photo02 ui-bt-nomal ui-opaimg">経歴書を添付する 4 <input type="file" id="uploadName" class="input_file" name="img_file[]" value="経歴書をアップロード" accept="image/*;capture=camera" style="display:none;"> 5 <input type="hidden" id="id"name="id" value="{{request()->input('id')}}"> 6 </label> 7</li> 8 </ul>

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/01/27 02:40

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

回答1

0

ベストアンサー

コードを見ると、var $input = $(this),から始まる画像を追加する処理が.on().done()の中に記述されていないため、アップロードする前にHTMLに要素が追加されるのではないかと思います。
なので、var thumb = 'あたりのコードは.on().done()から呼び出されるようにしないといけないと思います。ただ、FileReaderも非同期なので、もしかしたらwhenで書いたほうがいいかもしれませんね。



蛇足ですが。
私なら、このような構成にせずに「PHPから画像のパスをレスポンスで返し、それを受け取って画像の要素を追加する」ように書くと思います。

投稿2018/01/27 05:35

編集2018/01/27 05:36
Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/01/27 11:09

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問