##わからないこと
いつもお世話になっております。
この度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>
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー