teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問replaceWithでcloneしたinput type="file" 要素で再度、アップロードできない

編集履歴

回答編集履歴

5

必要ないコードを削除

2017/08/17 05:35

投稿

IShix
IShix

スコア1724

test CHANGED
@@ -174,8 +174,6 @@
174
174
 
175
175
  {
176
176
 
177
- el.window = $(window);
178
-
179
177
  el.input = $(setting.input);
180
178
 
181
179
  el.list = $(setting.list);

4

追記

2017/08/17 05:35

投稿

IShix
IShix

スコア1724

test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  ものすごく勘違いしてましたしっかり確認せずすみません。
8
8
 
9
- 問題は、ブラウザがfileなどをキャッシュするためchangeイベントが発生しないのが問題のようです。
9
+ 問題は、ブラウザがfileをキャッシュするためchangeイベントが発生しないのが問題のようです。
10
10
 
11
11
  コードを一部書き換えました勘違いしてましたすみません。
12
12
 
@@ -24,12 +24,20 @@
24
24
 
25
25
  ```
26
26
 
27
-
27
+ 生のjavascriptならクリックイベントで
28
-
29
-
30
28
 
31
29
  ```javascript
32
30
 
31
+ this.value = null;
32
+
33
+ ```
34
+
35
+ でいけそうです。(未検証)
36
+
37
+
38
+
39
+ ```javascript
40
+
33
41
  <!DOCTYPE html>
34
42
 
35
43
  <html>

3

コードを書き直しました

2017/08/17 05:33

投稿

IShix
IShix

スコア1724

test CHANGED
@@ -2,24 +2,30 @@
2
2
 
3
3
 
4
4
 
5
+ [コード書き直しました]
6
+
7
+ ものすごく勘違いしてましたしっかり確認せずすみません。
8
+
9
+ 問題は、ブラウザがfileなどをキャッシュするためchangeイベントが発生しないのが問題のようです。
10
+
11
+ コードを一部書き換えました勘違いしてましたすみません。
12
+
13
+
14
+
15
+ [参考ページ](https://stackoverflow.com/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file)
16
+
17
+
18
+
5
- ポイントは
19
+ ポイントはこちらです。valueを削除しています。
6
-
7
-
8
20
 
9
21
  ```javascript
10
22
 
11
- el.form.on('change', 'input[type="file"]', handleFileSelect);
23
+ el.input.prop('value','');
12
24
 
13
25
  ```
14
26
 
15
27
 
16
28
 
17
- この箇所です。詳しくは[こちら](http://www.jquerystudy.info/reference/events/on.html)のページをごらんください。
18
-
19
- 参考になりますと幸いです。
20
-
21
-
22
-
23
29
 
24
30
 
25
31
  ```javascript
@@ -40,7 +46,7 @@
40
46
 
41
47
  <body>
42
48
 
43
- <form id="form" action="Z_confirm.php" method="post" enctype="multipart/form-data">
49
+ <form action="Z_confirm.php" method="post" enctype="multipart/form-data">
44
50
 
45
51
 
46
52
 
@@ -88,7 +94,7 @@
88
94
 
89
95
  var obj = form.fileSelect({
90
96
 
91
- form : '#form',
97
+ input : '#files',
92
98
 
93
99
  list : '#list',
94
100
 
@@ -120,7 +126,7 @@
120
126
 
121
127
 
122
128
 
123
- //すべてのファイルを取得 配列で返ってきます
129
+ //すべてのファイルを取得 配列
124
130
 
125
131
  console.log(obj.getFiles());
126
132
 
@@ -162,7 +168,7 @@
162
168
 
163
169
  el.window = $(window);
164
170
 
165
- el.form = $(setting.form);
171
+ el.input = $(setting.input);
166
172
 
167
173
  el.list = $(setting.list);
168
174
 
@@ -184,7 +190,7 @@
184
190
 
185
191
  {
186
192
 
187
- el.form.on('change', 'input[type="file"]', handleFileSelect);
193
+ el.input.on('change', handleFileSelect);
188
194
 
189
195
  el.deleteBtn.on('click', deleteFile);
190
196
 
@@ -224,15 +230,15 @@
224
230
 
225
231
 
226
232
 
233
+ file.src = e.target.result;
234
+
227
235
  data.files.push(file);
228
236
 
229
-
230
-
231
237
  var spn = $('<span>');
232
238
 
233
239
  spn.append($('<img>').attr({
234
240
 
235
- src: e.target.result,
241
+ src: file.src,
236
242
 
237
243
  width: setting.thumbnail.width,
238
244
 
@@ -248,7 +254,11 @@
248
254
 
249
255
 
250
256
 
251
- el.form.trigger( "OnSelectFile", file );
257
+ el.input.trigger( "OnSelectFile", file );
258
+
259
+
260
+
261
+ reader.va
252
262
 
253
263
  };
254
264
 
@@ -262,6 +272,16 @@
262
272
 
263
273
 
264
274
 
275
+ var deleteVal = function()
276
+
277
+ {
278
+
279
+ el.input.prop('value','');
280
+
281
+ };
282
+
283
+
284
+
265
285
  var deleteFile = function()
266
286
 
267
287
  {
@@ -270,6 +290,8 @@
270
290
 
271
291
  data.files = [];
272
292
 
293
+ deleteVal();
294
+
273
295
  };
274
296
 
275
297
 
@@ -278,7 +300,7 @@
278
300
 
279
301
  {
280
302
 
281
- el.form.on('OnSelectFile', function(e, f){
303
+ el.input.on('OnSelectFile', function(e, f){
282
304
 
283
305
  fn(f);
284
306
 
@@ -294,6 +316,8 @@
294
316
 
295
317
  el.list.html('');
296
318
 
319
+ deleteVal();
320
+
297
321
  };
298
322
 
299
323
 

2

誤字訂正と追記

2017/08/17 05:31

投稿

IShix
IShix

スコア1724

test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- この箇所です。詳しくは[こちら](http://www.jquerystudy.info/reference/events/on.html)のページをごんらください。
17
+ この箇所です。詳しくは[こちら](http://www.jquerystudy.info/reference/events/on.html)のページをごらんください。
18
18
 
19
19
  参考になりますと幸いです。
20
20
 
@@ -120,7 +120,7 @@
120
120
 
121
121
 
122
122
 
123
- //すべてのファイルを取得 配列
123
+ //すべてのファイルを取得 配列で返ってきます
124
124
 
125
125
  console.log(obj.getFiles());
126
126
 

1

追記です。

2017/08/17 04:22

投稿

IShix
IShix

スコア1724

test CHANGED
@@ -1,4 +1,4 @@
1
- 当方、生のJavascriptを書いたことがなくコードが理解できなかったのでJqueryのみで書いてみました。書いているうちに少し大きめになってしまいました。参考にしていただけますと幸いです。
1
+ 当方、生のJavascriptを書いたことがなくコードが理解できなかったのでJqueryのみで書いてみました。書いているうちに少し大きめになってしまいました。すみません。参考にしていただけますと幸いです。
2
2
 
3
3
 
4
4