質問編集履歴
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -102,4 +102,100 @@
|
|
|
102
102
|
});
|
|
103
103
|
});
|
|
104
104
|
</script>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
修正
|
|
109
|
+
これでもうまくいきませんでした
|
|
110
|
+
```
|
|
111
|
+
<!-- Latest compiled and minified CSS -->
|
|
112
|
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
|
113
|
+
|
|
114
|
+
<!-- Optional theme -->
|
|
115
|
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
|
|
116
|
+
|
|
117
|
+
<!-- Latest compiled and minified JavaScript -->
|
|
118
|
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
|
119
|
+
<script type="text/javascript">
|
|
120
|
+
// bootstrapっぽいプログレスバーのテンプレート
|
|
121
|
+
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>";
|
|
122
|
+
|
|
123
|
+
$(function(){
|
|
124
|
+
|
|
125
|
+
var def = $.Deferred();
|
|
126
|
+
var promise = def;
|
|
127
|
+
|
|
128
|
+
$(".uploadFile").change(function() {
|
|
129
|
+
|
|
130
|
+
// ファイル分タスクを作成
|
|
131
|
+
$.each(this.files, function(i, file){
|
|
132
|
+
|
|
133
|
+
promise = promise.pipe(function(response){
|
|
134
|
+
|
|
135
|
+
var newPromise = $.Deferred();
|
|
136
|
+
|
|
137
|
+
var formData = new FormData();
|
|
138
|
+
formData.enctype = "multipart/form-data";
|
|
139
|
+
formData.append("file", file);
|
|
140
|
+
$("#progress-container").append(progressTemplate);
|
|
141
|
+
$.ajax({
|
|
142
|
+
url: "/mypage/piy/add",
|
|
143
|
+
type: 'POST',
|
|
144
|
+
dataType: 'text',
|
|
145
|
+
data: formData,
|
|
146
|
+
cache: false,
|
|
147
|
+
contentType: false,
|
|
148
|
+
processData: false,
|
|
149
|
+
xhr: function() {
|
|
150
|
+
var xhr = $.ajaxSettings.xhr();
|
|
151
|
+
if (xhr.upload) {
|
|
152
|
+
xhr.upload.addEventListener('progress', function(evt) {
|
|
153
|
+
var percent = (evt.loaded / evt.total) * 100;
|
|
154
|
+
$("#progress-container").find(".progress-bar").width(percent + "%");
|
|
155
|
+
|
|
156
|
+
}, false);
|
|
157
|
+
}
|
|
158
|
+
return xhr;
|
|
159
|
+
},
|
|
160
|
+
success: function(imageData, status, xhr) {
|
|
161
|
+
var res = {};
|
|
162
|
+
try {
|
|
163
|
+
res = $.parseJSON(xhr.responseText);
|
|
164
|
+
}catch (e) {}
|
|
165
|
+
$("#image-files ul").append("<img class='imgView' width=100 height=100 src=\"" + res.img + "\" / >");
|
|
166
|
+
/*
|
|
167
|
+
$('<input>').attr({
|
|
168
|
+
|
|
169
|
+
type: 'hidden',
|
|
170
|
+
name: "img["+res.img_id+"]",
|
|
171
|
+
value: res.img_id,
|
|
172
|
+
}).appendTo('form');
|
|
173
|
+
*/
|
|
174
|
+
$('<input>').attr({
|
|
175
|
+
type: 'textarea',
|
|
176
|
+
name: "body["+res.img_id+"]",
|
|
177
|
+
value: "",
|
|
178
|
+
}).appendTo('form');
|
|
179
|
+
},
|
|
180
|
+
error: function(xhr, textStatus, errorThrown) {
|
|
181
|
+
var res = {};
|
|
182
|
+
try {
|
|
183
|
+
res = $.parseJSON(xhr.responseText);
|
|
184
|
+
} catch (e) {}
|
|
185
|
+
alert(res.errorMessage);
|
|
186
|
+
},
|
|
187
|
+
complete: function() {
|
|
188
|
+
$("#progress-container").children().remove();
|
|
189
|
+
newPromise.resolve();
|
|
190
|
+
}
|
|
191
|
+
});
|
|
192
|
+
return newPromise;
|
|
193
|
+
});
|
|
194
|
+
});
|
|
195
|
+
|
|
196
|
+
def.resolve();
|
|
197
|
+
});
|
|
198
|
+
});
|
|
199
|
+
</script>
|
|
200
|
+
|
|
105
201
|
```
|