参考サイト
ここのサイトを参考に実装してサーバーにアップロードまではできているのいですが
画像アップロード中に表示されルはずのプログレスバーが表示されません。
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。