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

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

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

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

JavaScript

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

Q&A

解決済

1回答

1457閲覧

ajaxでファイルプレビュー作成したものをajax送信ではなく送信されてしまう。

amaguri

総合スコア227

PHP

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

JavaScript

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

0グッド

0クリップ

投稿2017/08/04 08:59

現在のコードの動き
ファイルを選択されると画像プレビューの表示をして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 }

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

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

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

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

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

guest

回答1

0

ベストアンサー

「投稿」ボタンを押した時、ajaxでfromのimg、bodyの送信を行いたい。

にあたる部分が書かれていないのでは?
jQuery側で制御していなければsubmitすればページ遷移します。

本題とは若干ずれますが、formの要素にname=submitなど予約語を割り当てないよう心がけて下さい
javascriptで制御する際に処理が競合することがままあります

投稿2017/08/04 09:17

yambejp

総合スコア114572

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

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

amaguri

2017/08/04 09:20

$('.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'); }); }); }); にて記載していると思うのですが間違えていますでしょうか?。。。
yambejp

2017/08/04 10:30

$('.submit').change() changeイベントは発生するのでしょうか? submitのclickやformのsubmitイベントをトリガーにしませんか?
amaguri

2017/08/07 01:11

なるほど、、 発生しなかったのでクリックをトリガーに変えてみたいと思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問