やりたいこと
参考サイトをもとに以下コードを書きました。
やりたいこと
このサンプル画面に送信ボタンをつけ、
ボタンが押された時に$photo_post->save()が走る処理を書く
※現在、送信ボタンがないので$photo_post->save()は未実装です。
動きとしては
1.画像を選択するとプレビューの表示、サーバーに画像をアップロード。(実装済み)
2.送信ボタンを押すと「送信完了」メッセージorページに表示or遷移し$photo_post->save()で保存をかける。(未実装)
どうすれば実現可能でしょうか?
動作環境
FuelPHP
PHP 5.6.27
です
html
1 <div class="container clearfix"> 2 <div class="row"> 3 <div class="col-md-12"> 4 <p>画像ファイルを選択してください(複数可)</p> 5 </div> 6 </div> 7 <div class="row"> 8 <div class="col-xs-2"> 9 <span class="fileUpload btn btn-default"> 10 ファイルを選択 11 <input type="file" class="uploadFile" accept="image/*" multiple/> 12 </span> 13 </div> 14 </div> 15 <hr /> 16 <div class="row"> 17 <div class="col-md-12" id="image-files"> 18 <ul class="list-inline list-unstyled"></ul> 19 </div> 20 </div> 21 </div>
js
1<script type="text/javascript"> 2 // bootstrapっぽいプログレスバーのテンプレート 3 var progressTemplate = "<div class=\"list-group-item\"><div class=\"progress progress-striped active\"><div class=\"progress-bar progress-bar-info\" style=\"width: 0%;\"></div></div></div>"; 4 5 $(function(){ 6 7 var def = $.Deferred(); 8 var promise = def; 9 10 $(".uploadFile").change(function() { 11 12 // ファイル分タスクを作成 13 $.each(this.files, function(i, file){ 14 15 promise = promise.pipe(function(response){ 16 17 var newPromise = $.Deferred(); 18 19 var formData = new FormData(); 20 formData.enctype = "multipart/form-data"; 21 formData.append("file", file); 22 $("#progress-container").append(progressTemplate); 23 $.ajax({ 24 url: "/mypage/piy/add", 25 type: 'POST', 26 dataType: 'text', 27 data: formData, 28 cache: false, 29 contentType: false, 30 processData: false, 31 xhr: function() { 32 var xhr = $.ajaxSettings.xhr(); 33 if (xhr.upload) { 34 xhr.upload.addEventListener('progress', function(evt) { 35 var percent = (evt.loaded / evt.total) * 100; 36 $("#progress-container").find(".progress-bar").width(percent + "%"); 37 }, false); 38 } 39 return xhr; 40 }, 41 success: function(imageData) { 42 $("#image-files ul").append("<li><img class='imgView' width=100 height=100 src=\"" + imageData + "\" / ></li>"); 43 }, 44 error: function(xhr, textStatus, errorThrown) { 45 var res = {}; 46 try { 47 res = $.parseJSON(xhr.responseText); 48 } catch (e) {} 49 alert(res.errorMessage); 50 }, 51 complete: function() { 52 $("#progress-container").children().remove(); 53 newPromise.resolve(); 54 } 55 }); 56 return newPromise; 57 }); 58 }); 59 60 def.resolve(); 61 }); 62 }); 63</script>
php
1public function action_add() 2 { 3 //var_dump($_FILES['file']); 4 5 if (isset($_FILES['file']['error']) && is_int($_FILES['file']['error'])) { 6 7 try { 8 9 switch ($_FILES['file']['error']) { 10 case UPLOAD_ERR_OK: 11 break; 12 case UPLOAD_ERR_NO_FILE: 13 throw new RuntimeException('ファイルが選択されていません'); 14 case UPLOAD_ERR_INI_SIZE: 15 case UPLOAD_ERR_FORM_SIZE: 16 throw new RuntimeException('ファイルサイズが大きすぎます'); 17 default: 18 throw new RuntimeException('その他のエラーが発生しました'); 19 } 20 21 // MIMEタイプチェック 22 $mimeTypeCode = @exif_imagetype($_FILES['file']['tmp_name']); 23 if (!in_array($mimeTypeCode, array(IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG), true)) { 24 throw new RuntimeException('画像でないファイル、又は未対応の画像形式です'); 25 } 26 27 28 // 作成したサムネイルデータを取得してbase64エンコード 29 $imageFile = @base64_encode(@file_get_contents($_FILES['file']['tmp_name'])); 30 $mimeTypeStr = @image_type_to_mime_type($mimeTypeCode); 31 32 if ($imageFile && $mimeTypeStr) { 33 // 画像を出力 34 echo "data:" . $mimeTypeStr . ";base64," . $imageFile; 35 36 37 // ファイルアップロード 38 // 初期オブジェクトの生成 39 $photo_post = Model_PhotoPost::forge(); 40 $default_values = array(); 41 $filedata = array(); 42 $error_flag = false; 43 44 $sizes = array( 45 'L' => array('w' => 400, 'h' => 400), 46 'M' => array('w' => 200, 'h' => 200), 47 'S' => array('w' => 100, 'h' => 100), 48 ); 49 50 $filedata = myImage::doConfirm2("clubmember/tmp/", $sizes, array("image/jpeg"), true); 51 if (!empty($filedata['error'])) { 52 parent::$_view->set_global('custom_error', $filedata['error']); 53 $error_flag = true; 54 } 55 56 57 if($error_flag == false) { 58 $filedatas = array( 59 '0' => array( 60 'path' => $filedata['image'][0]->path, 61 'name' => $filedata['image'][0]->name, 62 'ext' => $filedata['image'][0]->ext, 63 ) 64 ); 65 66 //ファイルアップロード 67 $img_id = myImage::doDo($filedatas); 68 if (!empty($img_id)) { 69 $photo_post->img_id = $img_id[0]; 70 } 71 } 72 73 74 } else { 75 // 作成したサムネイルが見つからない、MIMEタイプが取れていない際のエラー 76 throw new RuntimeException('画像表示前になんらかのエラーが発生しました'); 77 } 78 79 } catch (RuntimeException $e) { 80 81 // レスポンスにエラー情報をセットする 82 //header('HTTP', true, 400); // bad requestを返すことにする 83 $json = array(); 84 $json['errorMessage'] = $e->getMessage(); 85 echo json_encode($json,JSON_UNESCAPED_UNICODE); 86 exit; 87 } 88 } 89 exit; 90 }
回答1件
あなたの回答
tips
プレビュー