現在のコードの動き
ファイルを選択されると画像プレビューの表示をしてajaxでファイルを非同期通信でアップロード
その際「hiddenでimg」と「bodyform」の作成
できていないこと
「投稿」ボタンを押した時、ajaxでfromのimg、bodyの送信を行いたい。
その後投稿完了とメッセージを表示する。
どうすれば投稿完了メッセージの表示とajaxでの表示ができますでしょうか?
formDataを使うとうまくいきと聞いて実装したのですがうまくいきません。
動作環境
mac
chromeブラウザ
Fuel: 1.7.0
になります。
現在のコード
<section> <!----> <?php echo Form::open(array('action'=>'', 'enctype' => 'multipart/form-data')) ?> <div class="container clearfix"> <div class="row"> <div class="col-md-12"> <p>画像ファイルを選択してください(複数可)</p> </div> </div> <div class="row"> <div class="col-xs-2"> <span class="fileUpload btn btn-default"> ファイルを選択 <input type="file" class="uploadFile" accept="image/*" multiple/> </span> </div> <div class="col-xs-4" id="progress-container"> </div> </div> <br /> <div class="row"> <div class="col-md-12" id="image-files"> <ul class="list-inline list-unstyled"></ul> </div> </div> <tr> <th colspan="2" class="btn_th"><input type="submit" class="submit" id="submit" name="submit" value="投稿" onclick="return check_hope_date()"/></th> </tr> </div> <?php echo Form::hidden("mode", "do") ?> <?php echo Form::close() ?> </section>
<script type="text/javascript"> // bootstrapっぽいプログレスバーのテンプレート 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>"; $(function(){ var def = $.Deferred(); var promise = def; $('#submit').attr('disabled', 'disabled'); $(".uploadFile").change(function() { // ファイル分タスクを作成 $.each(this.files, function(i, file){ promise = promise.pipe(function(response){ var newPromise = $.Deferred(); var formData = new FormData(); formData.enctype = "multipart/form-data"; formData.append("file", file); $("#progress-container").append(progressTemplate); $.ajax({ url: "/hogehoge/ninnin/add", type: 'POST', dataType: 'text', data: formData, cache: false, contentType: false, processData: false, xhr: function() { var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { $('#submit').attr('disabled', 'disabled'); xhr.upload.addEventListener('progress', function(evt) { var percent = (evt.loaded / evt.total) * 100; $("#progress-container").find(".progress-bar").width(percent + "%"); }, false); } return xhr; }, success: function(imageData, status, xhr) { var res = {}; try { res = $.parseJSON(xhr.responseText); }catch (e) {} $("#image-files ul").append("<img class='imgView' src=\"" + res.img + "\" / >"); $('<input>').attr({ type: 'textarea', name: "body["+res.img_id+"]", value: "", }).appendTo('form'); $('<input>').attr({ type: 'hidden', name: "img["+res.img_id+"]", value: res.img_id, }).appendTo('form'); }, error: function(xhr, textStatus, errorThrown) { var res = {}; try { res = $.parseJSON(xhr.responseText); } catch (e) {} alert(res.errorMessage); }, complete: function() { $("#progress-container").children().remove(); newPromise.resolve(); $('#submit').removeAttr('disabled'); } }); return newPromise; }); }); def.resolve(); }); $('.submit').change(function() { // FormData オブジェクトを作成 var formData = new FormData( form ); $.ajax({ url: "/hogehoge/ninnin/index", type: "POST", cache: false, dataType: "json", data: formData }).done(function( res ) { // 送信せいこう! alert('SUCCESS'); }); }); }); </script>
PHP
1if ($post['mode'] == 'do') 2 { 3 保存する処理 4 } 5 exit; 6 }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/04 09:20
2017/08/04 10:30
2017/08/07 01:11