現在のコード
今できていること
・非同期でアップロードして置いて保存をかけたらデータベースに保存される。
できてないこと/やりたいこと
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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。