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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2611閲覧

FuelPHP+JavaScript 非同期通信で画像を複数アップロードした画像の保存を書けたい

amaguri

総合スコア227

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/07/27 07:06

編集2017/07/27 07:08

現在のコード
今できていること
・非同期でアップロードして置いて保存をかけたらデータベースに保存される。

できてないこと/やりたいこと
JSにて作成しているhidden属性タグが画像読み込むたびに上書きが発生していますので
phpの画像の$piy_post->img_id = $post["img"];で保存をかける時に最後に選択画像しかupload
できていません。

解決策として考えているのは
hiddenタグをimg[数字]にして
phpにてpost[img]が複数ならforeachをかけて保存をかければ
一枚一枚に保存がかかると思うのですが。。。
非同期で毎回処理しているので
hiddenタグのimg[数字]のようにするやり方がわかりません
何かいい方法はありませんでしょうか?

ソースコードのエラーではなく
ロジックの質問になりますが
よろしくお願いします。

PHPは回答に記載させていただきます。

HTML

1<section> 2 <?php echo Form::open(array('action'=>'/mypage/piy/add', 'enctype' => 'multipart/form-data')) ?> 3 <div class="container clearfix"> 4 <div class="row"> 5 <div class="col-md-12"> 6 <p>画像ファイルを選択してください(複数可)</p> 7 </div> 8 </div> 9 <div class="row"> 10 <div class="col-xs-2"> 11 <span class="fileUpload btn btn-default"> 12 ファイルを選択 13 <input type="file" class="uploadFile" accept="image/*" multiple/> 14 </span> 15 </div> 16 </div> 17 <hr /> 18 <div class="row"> 19 <div class="col-md-12" id="image-files"> 20 <ul class="list-inline list-unstyled"></ul> 21 </div> 22 </div> 23 </div> 24 <tr> 25 <th colspan="2" class="btn_th"><input type="submit" name="submit" value="投稿" class="submit_button" onclick="return check_hope_date()"></th> 26 </tr> 27 <?php echo Form::hidden("mode", "do") ?> 28 <?php echo Form::close() ?> 29</section>

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, status, xhr) { 42 var res = {}; 43 try { 44 res = $.parseJSON(xhr.responseText); 45 }catch (e) {} 46 $("#image-files ul").append("<img class='imgView' width=100 height=100 src=\"" + res.img + "\" / >"); 47 $('<input>').attr({ 48 type: 'hidden', 49 name: 'img', 50 value: res.img_id, 51 }).appendTo('form'); 52 }, 53 error: function(xhr, textStatus, errorThrown) { 54 var res = {}; 55 try { 56 res = $.parseJSON(xhr.responseText); 57 } catch (e) {} 58 alert(res.errorMessage); 59 }, 60 complete: function() { 61 $("#progress-container").children().remove(); 62 newPromise.resolve(); 63 } 64 }); 65 return newPromise; 66 }); 67 }); 68 69 def.resolve(); 70 }); 71 }); 72</script>

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

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

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

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

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

guest

回答2

0

PHP

1 elseif ($post['mode'] == 'do') 2 { 3 $i = 0; 4 foreach ($post["img"] as $img) { 5 var_dump($img); 6 if($i != 0) 7 { 8 $piy_post = Model_PiyPost::forge(); 9 } 10 $piy_post->club_member_id = $this->_club_member->id; 11 $piy_post->img_id = $img; 12 $piy_post->lang = $this->_club_member->piy_lang; 13 $piy_post->house_id = $this->_club_member->house->id; 14 $piy_post->approval_flag = "H"; 15 $piy_post->save(); 16 $i ++; 17 } 18 19 // 表示 20 parent::$_view->set('content', ViewModel::forge('mypage/piy/do')); 21 parent::$_view->set('title', ' | '); 22 return parent::$_view; 23 }

JS

1 $('<input>').attr({ 2 type: 'hidden', 3 name: "img["+res.img+"]", 4 value: res.img_id, 5 }).appendTo('form');

投稿2017/07/27 08:53

amaguri

総合スコア227

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

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

0

自己解決

PHP

1public function action_add() 2 { 3 if (empty($post['mode'])){ 4 $post = Input::post(); 5 $default_values = array(); 6 $post = myUtil::setDefaultPostData($post,$default_values); 7 $piy_post = Model_PiyPost::forge(); 8 } 9 10 //var_dump($post); 11 if (empty($post['mode'])) 12 { 13 if (isset($_FILES['file']['error']) && is_int($_FILES['file']['error'])) { 14 try { 15 16 switch ($_FILES['file']['error']) { 17 case UPLOAD_ERR_OK: 18 break; 19 case UPLOAD_ERR_NO_FILE: 20 throw new RuntimeException('ファイルが選択されていません'); 21 case UPLOAD_ERR_INI_SIZE: 22 case UPLOAD_ERR_FORM_SIZE: 23 throw new RuntimeException('ファイルサイズが大きすぎます'); 24 default: 25 throw new RuntimeException('その他のエラーが発生しました'); 26 } 27 28 // MIMEタイプチェック 29 $mimeTypeCode = @exif_imagetype($_FILES['file']['tmp_name']); 30 if (!in_array($mimeTypeCode, array(IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG), true)) { 31 throw new RuntimeException('画像でないファイル、又は未対応の画像形式です'); 32 } 33 34 35 // 作成したサムネイルデータを取得してbase64エンコード 36 $imageFile = @base64_encode(@file_get_contents($_FILES['file']['tmp_name'])); 37 $mimeTypeStr = @image_type_to_mime_type($mimeTypeCode); 38 39 if ($imageFile && $mimeTypeStr) { 40 // ファイルアップロード 41 // 初期オブジェクトの生成 42 $default_values = array(); 43 $filedata = array(); 44 $error_flag = false; 45 46 $sizes = array( 47 'L' => array('w' => 400, 'h' => 400), 48 'M' => array('w' => 200, 'h' => 200), 49 'S' => array('w' => 100, 'h' => 100), 50 ); 51 52 $filedata = myImage::doConfirm2("clubmember/tmp/", $sizes, array("image/jpeg"), true); 53 if (!empty($filedata['error'])) { 54 parent::$_view->set_global('custom_error', $filedata['error']); 55 $error_flag = true; 56 } 57 58 59 if($error_flag == false) { 60 $filedatas = array( 61 '0' => array( 62 'path' => $filedata['image'][0]->path, 63 'name' => $filedata['image'][0]->name, 64 'ext' => $filedata['image'][0]->ext, 65 ) 66 ); 67 68 //ファイルアップロード 69 $img_id = myImage::doDo($filedatas); 70 if (!empty($img_id)) { 71 $post = Input::post(); 72 $default_values = array(); 73 $post = myUtil::setDefaultPostData($post,$default_values); 74 $piy_post->img_id = $img_id[0]; 75 } 76 // 画像を出力 77 $json = array(); 78 $json['img'] = "data:" . $mimeTypeStr . ";base64," . $imageFile; 79 $json['img_id'] = $piy_post->img_id; 80 81 // 画像を出力 82 echo json_encode($json,JSON_UNESCAPED_UNICODE); 83 //echo "data:" . $mimeTypeStr . ";base64," . $imageFile; 84 } 85 } else { 86 // 作成したサムネイルが見つからない、MIMEタイプが取れていない際のエラー 87 throw new RuntimeException('画像表示前になんらかのエラーが発生しました'); 88 } 89 90 } catch (RuntimeException $e) { 91 92 // レスポンスにエラー情報をセットする 93 //header('HTTP', true, 400); // bad requestを返すことにする 94 95 $json = array(); 96 $json['errorMessage'] = $e->getMessage(); 97 echo json_encode($json,JSON_UNESCAPED_UNICODE); 98 exit; 99 } 100 } 101 exit; 102 103 } 104 elseif ($post['mode'] == 'do') 105 { 106 var_dump($post); 107 if(!is_array($piy_post)) 108 { 109 $piy_post->club_member_id = $this->_club_member->id; 110 $piy_post->img_id = $post["img"]; 111 $piy_post->lang = $this->_club_member->piy_lang; 112 $piy_post->house_id = $this->_club_member->house->id; 113 $piy_post->approval_flag = "H"; 114 $piy_post->save(); 115 116 // 表示 117 parent::$_view->set('content', ViewModel::forge('mypage/piy/do')); 118 parent::$_view->set('title', ' | '); 119 return parent::$_view; 120 } 121 } 122 }

投稿2017/07/27 07:07

amaguri

総合スコア227

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問