質問編集履歴

4

誤字が在ったため修正

2016/12/13 12:33

投稿

kusaka00
kusaka00

スコア55

test CHANGED
File without changes
test CHANGED
@@ -274,8 +274,4 @@
274
274
 
275
275
 
276
276
 
277
- 何卒宜しくお願い致します。ody>
277
+ 何卒宜しくお願い致します。
278
-
279
- </html>
280
-
281
- ```

3

説明文を変更

2016/12/13 12:33

投稿

kusaka00
kusaka00

スコア55

test CHANGED
File without changes
test CHANGED
@@ -1,40 +1,52 @@
1
1
  jQueryを使ってファイルのアップロードができるようにしたいです。
2
2
 
3
- 1つだけだったら、できたのですが、複数設置しようとするとうまくいきません。
3
+ 1つだけだったら、できたのですが、ソース上に設置した「追加」のボタンを押し、ファイルをアップロードするinputタグを複数設置するとうまくいきません。
4
+
5
+
6
+
4
-
7
+ ■出来たこと
8
+
5
-
9
+ まず最初にファイルをアップロードするinputタグをHTML上に直書きし
6
-
10
+
7
- 5M以上のファイルをアップロードしようとするとダイヤログがでるようにてますが、追加ボタンで追加したファイルのアップロードのフォーム個別に5m以上のフィアをアップロードした置きに出るダヤログ表示させたいです。
11
+ アップロードしようとしたファイルのバイト数を取得し、if文5m以上のファイと5m以下のファル容量判断
12
+
8
-
13
+ ・ファイルの容量が5m以上ならダイアログを表示し5m以上のファイルなので、
9
-
10
-
14
+
11
- 初めて質問で、失礼な書き方ていたら申し訳ありません
15
+ 5m以下ファイル上げくださと注釈が出るようにする
16
+
12
-
17
+ ・アップロードしようとしたファイルのファイル名、容量、種類を表示
18
+
19
+ ・「追加」ボタンを押すことで上記と同じ事ができるタグを追加
20
+
21
+
22
+
13
- 何卒宜しお願致します。
23
+ ■出来なて困ってること
14
-
15
-
16
-
24
+
17
- ###発生している問題・エラーメセージ
25
+ ・ページを表示た時に最初に表示されている「ファイルを選択」ボタンをクリクすると上記で書いた動作はするが、
18
-
26
+
19
- 最初に追加ボタンを押してファイルを入れると、何故か1つ目にファイル名などの表記2つされてます。
27
+ 追加ボタンを押して表示された「ファイルを選択」ボタンでは5m以上のファイルを選択してもダイアログ反応
28
+
20
-
29
+ ・ページを表示した時に最初に表示されている「ファイルを選択」ボタンを再度
21
-
22
-
30
+
23
- 追加ボタンを2回押してファイルアップロようとすと、上から3,2,1と重複してファイル名などが表示されてまいます。
31
+ ・「追加ボタンを押して、ペジを表示た時に最初に表示されていファイルを選択」ボタンをクリック
32
+
24
-
33
+ ファイルを選択すると全ての「ファイルを選択」ボタンに同じファイルの内容が表示される
34
+
35
+
36
+
25
-
37
+ ■最終的にやりたいこと
38
+
26
-
39
+ ・ファイルをアップロードしてもらう時に複数枚のファイルをアップロードできるようにしたい
40
+
41
+ ・「ファイルを選択」ボタンをクリックしてアップロードできるファイルの容量の上限は1つにつき5m
42
+
43
+ ・アップロードするファイルが5m以上の時ダイアログを表示し、
44
+
45
+ 「アップロードしたファイルサイズが5MB以上のため、5MB以下のファイルをアップロードしてください。」
46
+
47
+ という内容を表示したい
48
+
27
- 追加ボタンを押すとファイルアップロード用のボタンは出てくるのですが
49
+ ・「追加ボタンを押すで任意に「ファイルを選択」するボタンを増やしたい
28
-
29
- 複数ファイルをアップロードしようとすると最後にアップロードした画像の内容に全て上書きされてしまいます。
30
-
31
-
32
-
33
- 5m以上のファイルをアップロードした時にダイアログが出るのですが、それが個々の「ファイルを選択」ボタンに反応しているのかよくわからないです。
34
-
35
-
36
-
37
-
38
50
 
39
51
 
40
52
 
@@ -44,6 +56,8 @@
44
56
 
45
57
  ###該当のソースコード
46
58
 
59
+ ```ここに言語を入力
60
+
47
61
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
48
62
 
49
63
  <html lang="ja" xml:lang="ja">
@@ -58,137 +72,133 @@
58
72
 
59
73
  <title></title>
60
74
 
61
- <link rel="stylesheet" href="style.css" type="text/css">
75
+
62
76
 
63
77
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
64
78
 
65
- <script type="text/javascript">
79
+ <script type="text/javascript">
66
80
 
67
81
  $(function() {
68
82
 
69
-
70
-
71
- if(! window.File){$('body').html('ご利用のブラウザでは、File APIをサポートしていません');}
83
+ if(! window.File){$('body').html('ご利用のブラウザでは、File APIをサポートしていません');}
84
+
72
-
85
+ //最初にHTML上に表示されているフォームボタンに対して発動
73
-
74
-
86
+
75
- $('input[type=file]').after('<sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>');
87
+ $('input[type=file]').after('<sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>');
76
-
77
- $('input[type=file]').change(function() {
78
-
79
- var file = $(this).prop('files')[0];
80
-
81
- $('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type);
82
-
83
- });
84
88
 
85
89
  });
86
90
 
87
91
 
88
92
 
89
- //ファイルのアップロード
93
+ //ファイルのアップロード
90
-
94
+
91
- $(function() {
95
+ $(function() {
92
-
96
+
93
- var FileUpNo = '1';
97
+ var FileUpNo = '1';
98
+
94
-
99
+ //追加ボタンを押したら
100
+
95
- $('#Plus').on('click',function(){
101
+ $('#Plus').on('click',function(){
96
-
97
- FileUpNo++;
102
+
98
-
99
- $(this).before('<input type="file" name="clip-'+ FileUpNo +'" size="50"><br>');
103
+ FileUpNo++; //inputname属性をナチュラルにするために1を加算し番号を振る
104
+
100
-
105
+ //追加ボタンの上にファイルアップロード用のinputとファイルサイズなどを表示するためのタグを挿入
106
+
101
- $('input[type=file]').after('<sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>');
107
+ $(this).before('<input type="file" name="clip-'+ FileUpNo +'" size="50"><br><sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>');
102
-
103
- $('input[type=file]').change(function() {
104
-
105
- var file = $(this).prop('files')[0];
106
-
107
- $('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type);
108
-
109
- });
110
108
 
111
109
  });
112
110
 
111
+ //
112
+
113
+ $('input[type=file]').on('click',function(){
114
+
115
+ $(this).after().change(function() {
116
+
117
+ var file = $(this).prop('files')[0];
118
+
119
+ $('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type);
120
+
121
+ });
122
+
123
+ });
124
+
125
+ //$('input[type=file]').after('');
126
+
113
127
  });
114
128
 
115
129
 
116
130
 
117
- function getFiseSize(file_size){
118
-
119
- var str;
120
-
121
-
122
-
123
- var unit = ['byte', 'KB', 'MB', 'GB', 'TB'];
124
-
125
-
126
-
127
- for (var i = 0; i < unit.length; i++) {
128
-
129
- if (file_size < 1024 || i == unit.length - 1) {
130
-
131
- if (i == 0) {
132
-
133
- // カンマ付与
134
-
135
- var integer = file_size.toString().replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,');
136
-
137
- str = integer + unit[i];
138
-
139
- } else {
140
-
141
- // 小数点第2位は切り捨て
142
-
143
- file_size = Math.floor(file_size * 100) / 100;
144
-
145
- // 整数と小数に分割
146
-
147
- var num = file_size.toString().split('.');
148
-
149
- // カンマ付与
150
-
151
- var integer = num[0].replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,');
152
-
153
- if (num[1]) {
154
-
155
- file_size = integer + '.' + num[1];
156
-
157
- }
158
-
159
- str = file_size + unit[i];
160
-
161
- }
162
-
163
- break;
164
-
165
- }
166
-
167
-
168
-
169
- file_size = file_size / 1024;
170
-
171
- //alert(file_size);
172
-
173
-
174
-
175
- if (i == 'KB') {
176
-
177
- }else if(i == 'byte'){
178
-
179
- } else if(file_size > 5120){
180
-
181
- alert("アップロードしたファイルサイズが5MB以上のため、5MB以下のファイルをアップロードしてください。");
131
+ //以下はファイルサイズのチェック用
132
+
133
+ function getFiseSize(file_size){
134
+
135
+ var str;
136
+
137
+ var unit = ['byte', 'KB', 'MB', 'GB', 'TB'];
138
+
139
+ for (var i = 0; i < unit.length; i++) {
140
+
141
+ if (file_size < 1024 || i == unit.length - 1) {
142
+
143
+ if (i == 0) {
144
+
145
+ // カンマ付与
146
+
147
+ var integer = file_size.toString().replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,');
148
+
149
+ str = integer + unit[i];
150
+
151
+ } else {
152
+
153
+ // 小数点第2位は切り捨て
154
+
155
+ file_size = Math.floor(file_size * 100) / 100;
156
+
157
+ // 整数と小数に分割
158
+
159
+ var num = file_size.toString().split('.');
160
+
161
+ // カンマ付与
162
+
163
+ var integer = num[0].replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,');
164
+
165
+ if (num[1]) {
166
+
167
+ file_size = integer + '.' + num[1];
168
+
169
+ }
170
+
171
+ str = file_size + unit[i];
172
+
173
+ }
174
+
175
+ break;
182
176
 
183
177
  }
184
178
 
179
+
180
+
181
+ file_size = file_size / 1024;
182
+
183
+ //alert(file_size);
184
+
185
+
186
+
187
+ if (i == 'KB') {
188
+
189
+ }else if(i == 'byte'){
190
+
191
+ } else if(file_size > 5120){
192
+
193
+ alert("アップロードしたファイルサイズが5MB以上のため、5MB以下のファイルをアップロードしてください。");
194
+
185
- }
195
+ }
196
+
186
-
197
+ }
187
-
188
-
198
+
189
- return str;
199
+ return str;
190
-
200
+
191
- }
201
+ }
192
202
 
193
203
  </script>
194
204
 
@@ -196,70 +206,76 @@
196
206
 
197
207
  <body>
198
208
 
199
- <div align="center">
200
-
201
- <table width="950">
202
-
203
- <tbody>
204
-
205
- <tr>
206
-
207
- <td colspan="4"><form action="" method="post" enctype="multipart/form-data">
208
-
209
- <table border="0" cellspacing="0" cellpadding="0" width="100%">
210
-
211
- <tbody>
212
-
213
- <tr>
214
-
215
- <td height="53" colspan="2"><table width="100%" border="0" cellpadding="7" cellspacing="0" class="unnamed4">
216
-
217
- <tbody>
218
-
219
- <tr>
220
-
221
- <td class="Class30" bgcolor="#FFFFFF">
222
-
223
- <input type="file" name="clip-1" size="50"><br>
224
-
225
- <button id="Plus" type="button">追加</button>
226
-
227
- <br>
228
-
229
- <br>
230
-
231
- <span style="color:#f00;margin: 0 0 10px 0;display: block;">アップロードするファイルのサイズが5MBをこえないサイズでお願い致します。</span>
232
-
233
- </td>
234
-
235
- </tr>
236
-
237
- </tbody>
238
-
239
- </table>
240
-
241
- </td>
242
-
243
- </tr>
244
-
245
- </tbody>
246
-
247
- </table>
248
-
249
- </form></td>
250
-
251
- </tr>
252
-
253
- </tbody>
254
-
255
- </table>
256
-
257
- </div>
209
+ <div align="center">
210
+
211
+ <table width="950">
212
+
213
+ <tbody>
214
+
215
+ <tr>
216
+
217
+ <td colspan="4">
218
+
219
+ <form action="" method="post" enctype="multipart/form-data">
220
+
221
+ <table border="0" cellspacing="0" cellpadding="0" width="100%">
222
+
223
+ <tbody>
224
+
225
+ <tr>
226
+
227
+ <td height="53" colspan="2"><table width="100%" border="0" cellpadding="7" cellspacing="0" class="unnamed4">
228
+
229
+ <tbody>
230
+
231
+ <tr>
232
+
233
+ <td class="Class30" bgcolor="#FFFFFF"><input type="file" name="clip-1" size="50">
234
+
235
+ <br>
236
+
237
+ <button id="Plus" type="button">追加</button>
238
+
239
+ <br>
240
+
241
+ <br>
242
+
243
+ <span style="color:#f00;margin: 0 0 10px 0;display: block;">アップロードするファイルのサイズが5MBをこえないサイズでお願い致します。</span></td>
244
+
245
+ </tr>
246
+
247
+ </tbody>
248
+
249
+ </table></td>
250
+
251
+ </tr>
252
+
253
+ </tbody>
254
+
255
+ </table>
256
+
257
+ </form>
258
+
259
+ </td>
260
+
261
+ </tr>
262
+
263
+ </tbody>
264
+
265
+ </table>
266
+
267
+ </div>
258
268
 
259
269
  </body>
260
270
 
261
271
  </html>
262
272
 
263
-
273
+ ```
264
-
274
+
275
+
276
+
265
- 何卒宜しくお願い致します。
277
+ 何卒宜しくお願い致します。ody>
278
+
279
+ </html>
280
+
281
+ ```

2

タグの追加

2016/12/13 12:31

投稿

kusaka00
kusaka00

スコア55

test CHANGED
File without changes
test CHANGED
File without changes

1

必要ないプログラムが記述されていたので、その部分を削除しました。

2016/12/13 01:08

投稿

kusaka00
kusaka00

スコア55

test CHANGED
File without changes
test CHANGED
@@ -64,176 +64,128 @@
64
64
 
65
65
  <script type="text/javascript">
66
66
 
67
- //追加ボタンで①高さと②幅と 枚の行を増やす
68
-
69
67
  $(function() {
70
68
 
69
+
70
+
71
+ if(! window.File){$('body').html('ご利用のブラウザでは、File APIをサポートしていません');}
72
+
73
+
74
+
75
+ $('input[type=file]').after('<sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>');
76
+
77
+ $('input[type=file]').change(function() {
78
+
79
+ var file = $(this).prop('files')[0];
80
+
81
+ $('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type);
82
+
83
+ });
84
+
85
+ });
86
+
87
+
88
+
89
+ //ファイルのアップロード
90
+
91
+ $(function() {
92
+
71
- var NoData = '1';
93
+ var FileUpNo = '1';
72
-
94
+
73
- $(document).on('click', '#add_row', function(e) {
95
+ $('#Plus').on('click',function(){
74
-
96
+
75
- NoData++;
97
+ FileUpNo++;
76
-
77
- console.log(NoData);
98
+
78
-
79
- var tr_row = '' +
80
-
81
- '<tr>' +
82
-
83
- '<td width="150" rowspan="2">'+ NoData +'</td>' +
99
+ $(this).before('<input type="file" name="clip-'+ FileUpNo +'" size="50"><br>');
84
-
85
- '<td><span class="font12">①高さ ' +
100
+
86
-
87
- '<input name="'+ NoData +'つ目の画像のサイズ(高さmm)" type="text" id="サイズ(高さmm)3" size="10"> cm</span>&nbsp;</td>' +
88
-
89
- '<td rowspan="2"> <input name="'+ NoData +'つ目の画像の製作依頼枚数" type="text" id="サイズ(高さmm)3" size="10"> &nbsp;枚</td>' +
90
-
91
- '</tr>' +
92
-
93
- '<tr>' +
94
-
95
- '<td><span class="font12">②幅 ' +
96
-
97
- '<input name="'+ NoData +'つ目の画像のサイズ(幅mm)" type="text" id="サイズ(幅mm)8" size="10"> cm</span>&nbsp;</td>' +
101
+ $('input[type=file]').after('<sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>');
98
-
99
- '</tr>';// 挿入する行のテンプレート
102
+
100
-
101
- var row_cnt = $("#DataPlus").children().length;// 現在のDOMで表示されているtrの数
102
-
103
- $(':hidden[name="row_length"]').val(parseInt(row_cnt) + 1);// input type=hiddenに格納されている行数を変更
104
-
105
- $(tr_row).appendTo($('#DataPlus'));// tbody末尾にテンプレートを挿入
106
-
107
- $('#DataPlus > tr:last > td > input').each(function() {
103
+ $('input[type=file]').change(function() {
108
-
104
+
109
- var base_name = $(this).attr('name');
105
+ var file = $(this).prop('files')[0];
110
-
106
+
111
- $(this).attr('name', base_name + '[' + row_cnt + ']');
107
+ $('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type);
112
-
108
+
113
- });// input name部分を変更
109
+ });
114
110
 
115
111
  });
116
112
 
117
-
113
+ });
114
+
115
+
116
+
118
-
117
+ function getFiseSize(file_size){
118
+
119
+ var str;
120
+
121
+
122
+
119
- if(! window.File){$('body').html('ご利用のブラウザでは、File APIをサポートしていません');}
123
+ var unit = ['byte', 'KB', 'MB', 'GB', 'TB'];
120
124
 
121
125
 
122
126
 
123
- $('input[type=file]').after('<sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>');
124
-
125
- $('input[type=file]').change(function() {
126
-
127
- var file = $(this).prop('files')[0];
128
-
129
- $('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type);
130
-
131
- });
132
-
133
- });
134
-
135
-
136
-
137
- //ファイルのアップロード
138
-
139
- $(function() {
140
-
141
- var FileUpNo = '1';
142
-
143
- $('#Plus').on('click',function(){
144
-
145
- FileUpNo++;
146
-
147
- $(this).before('<input type="file" name="clip-'+ FileUpNo +'" size="50"><br>');
148
-
149
- $('input[type=file]').after('<sub style="font-size: 120%;font-weight:bold;display:block;margin: 10px 0 0 0;"></sub>');
150
-
151
- $('input[type=file]').change(function() {
152
-
153
- var file = $(this).prop('files')[0];
154
-
155
- $('sub').html('ファイル名:' + file.name + ' / サイズ:<span style="color:#f00">' + getFiseSize(file.size) + '</span> / 種類:' + file.type);
156
-
157
- });
158
-
159
- });
160
-
161
- });
162
-
163
-
164
-
165
- function getFiseSize(file_size){
166
-
167
- var str;
168
-
169
-
170
-
171
- var unit = ['byte', 'KB', 'MB', 'GB', 'TB'];
127
+ for (var i = 0; i < unit.length; i++) {
128
+
129
+ if (file_size < 1024 || i == unit.length - 1) {
130
+
131
+ if (i == 0) {
132
+
133
+ // カンマ付与
134
+
135
+ var integer = file_size.toString().replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,');
136
+
137
+ str = integer + unit[i];
138
+
139
+ } else {
140
+
141
+ // 小数点第2位は切り捨て
142
+
143
+ file_size = Math.floor(file_size * 100) / 100;
144
+
145
+ // 整数と小数に分割
146
+
147
+ var num = file_size.toString().split('.');
148
+
149
+ // カンマ付与
150
+
151
+ var integer = num[0].replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,');
152
+
153
+ if (num[1]) {
154
+
155
+ file_size = integer + '.' + num[1];
156
+
157
+ }
158
+
159
+ str = file_size + unit[i];
160
+
161
+ }
162
+
163
+ break;
164
+
165
+ }
166
+
167
+
168
+
169
+ file_size = file_size / 1024;
170
+
171
+ //alert(file_size);
172
+
173
+
174
+
175
+ if (i == 'KB') {
176
+
177
+ }else if(i == 'byte'){
178
+
179
+ } else if(file_size > 5120){
180
+
181
+ alert("アップロードしたファイルサイズが5MB以上のため、5MB以下のファイルをアップロードしてください。");
182
+
183
+ }
184
+
185
+ }
172
186
 
173
187
 
174
188
 
175
- for (var i = 0; i < unit.length; i++) {
176
-
177
- if (file_size < 1024 || i == unit.length - 1) {
178
-
179
- if (i == 0) {
180
-
181
- // カンマ付与
182
-
183
- var integer = file_size.toString().replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,');
184
-
185
- str = integer + unit[i];
186
-
187
- } else {
188
-
189
- // 小数点第2位は切り捨て
190
-
191
- file_size = Math.floor(file_size * 100) / 100;
192
-
193
- // 整数と小数に分割
194
-
195
- var num = file_size.toString().split('.');
196
-
197
- // カンマ付与
198
-
199
- var integer = num[0].replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,');
200
-
201
- if (num[1]) {
202
-
203
- file_size = integer + '.' + num[1];
204
-
205
- }
206
-
207
- str = file_size + unit[i];
208
-
209
- }
210
-
211
- break;
212
-
213
- }
214
-
215
-
216
-
217
- file_size = file_size / 1024;
218
-
219
- //alert(file_size);
220
-
221
-
222
-
223
- if (i == 'KB') {
224
-
225
- }else if(i == 'byte'){
226
-
227
- } else if(file_size > 5120){
228
-
229
- alert("アップロードしたファイルサイズが5MB以上のため、5MB以下のファイルをアップロードしてください。");
230
-
231
- }
232
-
233
- }
234
-
235
-
236
-
237
189
  return str;
238
190
 
239
191
  }