Q&A
ありがとうございます！まずconsole.log(percent);をして入れて見ます！
ファイルはサンプルページでロードが起き同じファイルをしようしています！
参考サイト
ここのサイトを参考に実装してサーバーにアップロードまではできているのいですが
画像アップロード中に表示されルはずのプログレスバーが表示されません。
xhr: function() { var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.addEventListener('progress', function(evt) { var percent = (evt.loaded / evt.total) * 100; $("#progress-container").find(".progress-bar").width(percent + "%"); }, false); } return xhr; },
この部分での処理になると思うのですが
ここが動かない原因がわからず困っています。
一体何が原因なのでしょうか。。
それ以外の
画像の表示とはできています。。
<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; $(".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: "/mypage/piy/add", type: 'POST', dataType: 'text', data: formData, cache: false, contentType: false, processData: false, xhr: function() { var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { 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' width=100 height=100 src=\"" + res.img + "\" / >"); /* $('<input>').attr({ type: 'hidden', name: "img["+res.img_id+"]", value: res.img_id, }).appendTo('form'); */ $('<input>').attr({ type: 'textarea', name: "body["+res.img_id+"]", value: "", }).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(); } }); return newPromise; }); }); def.resolve(); }); }); </script>
修正
これでもうまくいきませんでした
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <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; $(".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: "/mypage/piy/add", type: 'POST', dataType: 'text', data: formData, cache: false, contentType: false, processData: false, xhr: function() { var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { 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' width=100 height=100 src=\"" + res.img + "\" / >"); /* $('<input>').attr({ type: 'hidden', name: "img["+res.img_id+"]", value: res.img_id, }).appendTo('form'); */ $('<input>').attr({ type: 'textarea', name: "body["+res.img_id+"]", value: "", }).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(); } }); return newPromise; }); }); def.resolve(); }); }); </script>
回答3件
0
質問時ソースにてhtmlでprogress-containerの宣言を忘れていました。
かきのソースがなかったためプログレスバーを表示するところがなかったという問題でした。
<div class="col-xs-4" id="progress-container"> </div>
修正後コード（変更したところのみ）
<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> <hr /> <div class="row"> <div class="col-md-12" id="image-files"> <ul class="list-inline list-unstyled"></ul> </div> </div> </div>
投稿2017/07/31 02:32
総合スコア227
0
問題の切り分けをしましょう。
まず、アップロード中に正常にprogressイベントが起きているのかどうかを確認してください。
var percentを計算している次の行に
javascript
1console.log(percent);
を入れれば、進行状況が確認できるはずです。
また、アップロードするファイルはそれなりの大きさのものを用意できていますか？
progressイベントの正確な仕様は覚えていませんが、あまりに小さいファイルサイズだと1回も呼び出されない可能性がありますので、アップロードテストするファイルは5MBぐらいにしておくのがいいでしょう。
これで調査して、progressイベントが適切に呼び出されていなかったら、どこか設定ミスがあることになります。
progressイベントは呼び出されているのでしたら、表示できないのはCSS周りの指定の問題だとわかります。
投稿2017/07/31 01:41
総合スコア1441
0
ベストアンサー
線すらでないとなるとBootstrap入れてるかが気になります。
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
こんな感じでBootstrap読み込んでますか？
投稿2017/07/28 11:38
総合スコア5545
回答ありがとうありがとうござい。
Bootstrapというものが
必要なんですね
何かでこれは宣言するものなのでしょうか？
それともインストールして使うものなのでしょうか？
調べてみたいと思います。
headタグのところにでも入れておけばOKですよー(Javascriptおよびcss読み込みと同じです)
回答では
http://getbootstrap.com/getting-started/#download
Bootstrap CDN
コピペしてるだけですので
ありがとうございます！試してみます！
htmlにてプログレスバーを表示するタグの記載漏れでした。。
無事解決しましたありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。