質問編集履歴

5

変更

2020/10/11 16:38

投稿

AtyAty
AtyAty

スコア9

test CHANGED
@@ -1 +1 @@
1
- <input type="file" name="file" id="file" accept="image/*,.pdf">で取得した画像をFileReaderで表示できない。
1
+ <input type="file" name="file" id="file" accept="image/*,.pdf">で取得したPDFファイルをFileReaderで表示できない。
test CHANGED
File without changes

4

更新

2020/10/11 16:37

投稿

AtyAty
AtyAty

スコア9

test CHANGED
File without changes
test CHANGED
@@ -52,11 +52,11 @@
52
52
 
53
53
   document.querySelector("#file").addEventListener("change", function(e){
54
54
 
55
- const file = e.target.files[0];
55
+ const file = e.target.files[0];
56
56
 
57
-    const filereader = new FileReader();
57
+ const filereader = new FileReader();
58
58
 
59
-    filereader.addEventListener("load",function(event){
59
+ filereader.addEventListener("load",function(event){
60
60
 
61
61
   document.querySelector('#preview02').setAttribute("src", event.target.result);
62
62
 

3

変更

2020/10/11 15:48

投稿

AtyAty
AtyAty

スコア9

test CHANGED
File without changes
test CHANGED
@@ -54,17 +54,17 @@
54
54
 
55
55
  const file = e.target.files[0];
56
56
 
57
- const filereader = new FileReader();
57
+    const filereader = new FileReader();
58
58
 
59
- filereader.addEventListener("load",function(event){
59
+    filereader.addEventListener("load",function(event){
60
60
 
61
- document.querySelector('#preview02').setAttribute("src", event.target.result);
61
+  document.querySelector('#preview02').setAttribute("src", event.target.result);
62
62
 
63
- });
63
+    });
64
64
 
65
- filereader.readAsDataURL(file);//実際にファイル内容を読み込むための記述
65
+    filereader.readAsDataURL(file);//実際にファイル内容を読み込むための記述
66
66
 
67
- });
67
+    });
68
68
 
69
69
  ```
70
70
 

2

変更

2020/10/11 15:46

投稿

AtyAty
AtyAty

スコア9

test CHANGED
@@ -1 +1 @@
1
- cmanOMat="move"divタグ内、input内、object内に入れてみがマウス移動できない。
1
+ <input type="file" name="file" id="file" accept="image/*,.pdf">で取得し画像をFileReader表示できない。
test CHANGED
@@ -1,76 +1,20 @@
1
- ###cmanOMat="move"divタグ内、input内、object内入れてみがマウス移動できない。
1
+ ### <input type="file" name="file" id="file" accept="image/*,.pdf">で取得した.PDFファイルをブラウザ上表示したい。
2
2
 
3
3
 
4
4
 
5
- PDFファイルを参照から取得し、ブラウザー上で表示するものを作成し、それをもう一つのPDFファイル表示画面に移動して重ね、重ねた状態で下のPDFファイルが透けて見える、という機能を作成奮闘しています。
6
5
 
7
6
 
8
7
 
9
- ※現在のブラウザ上の表示画面を添付します。
10
8
 
11
- ![イメージ説明](ce607ec3ef37bdf858960f57bf2d2810.png)
9
+ ### 発生している問題・エラーッセージ
12
10
 
13
11
 
14
-
15
- ### コード
16
-
17
- HTML(index.html) 下のPDF表示のコードです。
18
-
19
- ```
20
-
21
- <div id="preview1">
22
-
23
- <div>
24
-
25
- <input type="file" name="upload_file" id="file2" >
26
-
27
- <object data="{path_to_file}" id="objects2" width="500px" height="500px"></object>
28
-
29
- </div>
30
-
31
- </div>
32
12
 
33
13
 
34
14
 
35
15
  ```
36
16
 
37
- Javascript (file2.js)
38
-
39
- ```
40
-
41
- window.addEventListener('load', () => {
42
-
43
- const f = document.getElementById('file2');
44
-
45
- f.addEventListener('change', evt => {
46
-
47
- let input = evt.target;
48
-
49
- if (input.files.length == 0) {
50
-
51
- console.log('No file selected');
17
+ .png, .Jpgファイルは表示できるのに、.pdfファイルは表示できない。
52
-
53
- return;
54
-
55
- }
56
-
57
- const file = input.files[0];
58
-
59
- const reader = new FileReader();
60
-
61
- reader.onload = () => {
62
-
63
- const object = document.getElementById('objects2');
64
-
65
- object.setAttribute("data",reader.result);
66
-
67
- };
68
-
69
- reader.readAsDataURL(file);
70
-
71
- });
72
-
73
- });
74
18
 
75
19
 
76
20
 
@@ -78,534 +22,62 @@
78
22
 
79
23
 
80
24
 
81
- ### 試したことがダメだった事
25
+ ### 該当のソースコード
82
-
83
- 使用したJS:cmanObjMove_v091.js
84
-
85
- 参考サイト:https://web-designer.cman.jp/javascript_ref/mouse/move/
86
26
 
87
27
 
88
28
 
89
- ①JSファイルの中のvar wTargetTag = [ 'img', 'div'];input、objectのタグ追加してみた。
29
+ ```ここ言語名入力
90
30
 
91
- ②cmanOMat="move"をdivタグ内、input内、object内に入れてみた。
31
+   <div >
92
32
 
33
+ <input type="file" name="file" id="file" accept="image/*,.pdf" capture="camera">
93
34
 
35
+ <img src="" alt="" id="preview02" cmanOMat="move">
94
36
 
37
+ </div>
95
38
 
39
+
96
40
 
97
- ### cmanObjMove_v091.js (一部文字数オーバーのため省略)
41
+ <script src="preview02.js" charset="utf-8"></script>
98
42
 
99
43
 
100
44
 
101
45
  ```
102
46
 
103
- // ----- 初期イベントの登録 --------------------------------------------------------------
104
-
105
- if ( window.addEventListener ){window.addEventListener('load', cmanOM_JS_init, false);}
106
-
107
- else if( window.attachEvent ) {window.attachEvent( 'onload', cmanOM_JS_init );}
108
47
 
109
48
 
49
+ Javascript(preview02.js)
110
50
 
111
- 省略=========================================================================================
51
+ ```ここに言語を入力
112
52
 
113
- // 初期処理(オンロード時)
53
+  document.querySelector("#file").addEventListener("change", function(e){
114
54
 
55
+ const file = e.target.files[0];
115
56
 
57
+ const filereader = new FileReader();
116
58
 
117
- function cmanOM_JS_init(){
59
+ filereader.addEventListener("load",function(event){
118
60
 
61
+ document.querySelector('#preview02').setAttribute("src", event.target.result);
119
62
 
63
+ });
120
64
 
121
- // 対象タグ(追加すれば移動対象となる)
65
+ filereader.readAsDataURL(file);//実際にファイル内容を読み込むため記述
122
66
 
123
- var wTargetTag = [ 'img', 'div' ];
124
-
125
- var wTagList = [];
126
-
127
- var wObjAt;
128
-
129
-
130
-
131
- cmanOM_VAR['moveOn'] = false;
132
-
133
-
134
-
135
-
136
-
137
- if ("ontouchstart" in window) {
138
-
139
- cmanOM_VAR['device'] ='mobi';
140
-
141
- }else{
142
-
143
- cmanOM_VAR['device'] ='pc';
144
-
145
- }
67
+ });
146
-
147
-
148
-
149
-
150
-
151
- // ----- 対象タグの一覧を配列に格納 --------------------------------------------------
152
-
153
- for(var i = 0; i < wTargetTag.length; i++){
154
-
155
-
156
-
157
- var wHtmlCollection = document.getElementsByTagName(wTargetTag[i]);
158
-
159
-
160
-
161
- for(var j = 0; j < wHtmlCollection.length; j++){
162
-
163
- wTagList.push( wHtmlCollection[j] );
164
-
165
- }
166
-
167
- }
168
-
169
-
170
-
171
- // ----- 対象タグの一覧より対象オブジェクト(cmanOMatの属性あり)を抽出する -----------
172
-
173
- for(var i = 0; i < wTagList.length; i++){
174
-
175
-
176
-
177
- wObjAt = wTagList[i].getAttribute("cmanOMat");
178
-
179
-
180
-
181
- if((wObjAt === null)||(wObjAt =='')){
182
-
183
- }else{
184
-
185
- if(wObjAt.toLowerCase().match(/move/)){
186
-
187
- cmanOM_Obj.push( wTagList[i] ); // 移動対象のオブジェクトを保存
188
-
189
- }
190
-
191
- }
192
-
193
- }
194
-
195
-
196
-
197
-
198
-
199
- // ----- 対象オブジェクトを移動可能な状態に整備する ----------------------------------
200
-
201
- for(var i = 0; i < cmanOM_Obj.length; i++){
202
-
203
-
204
-
205
- // ----- absolute以外の場合は、親要素を作成し位置ずれしないように調整 ------------
206
-
207
- if(cmanOM_Obj[i].style.position.toLowerCase() != 'absolute'){
208
-
209
-
210
-
211
- // 対象オブジェクトのSTYLE
212
-
213
- var wObjStyle = window.getComputedStyle(cmanOM_Obj[i], null);
214
-
215
-
216
-
217
- // 親要素の作成
218
-
219
- var wOyaDiv = document.createElement("div");
220
-
221
- wOyaDiv.setAttribute("id", "cmanOM_ID_DMY"+i);
222
-
223
- wOyaDiv.style.position = 'relative';
224
-
225
- wOyaDiv.style.width = cmanOM_Obj[i].offsetWidth + 'px'; // 大きさとmarginは元オブジェクトよりコピー
226
-
227
- wOyaDiv.style.height = cmanOM_Obj[i].offsetHeight + 'px';
228
-
229
- wOyaDiv.style.marginTop = wObjStyle.marginTop
230
-
231
- wOyaDiv.style.marginRight = wObjStyle.marginRight
232
-
233
- wOyaDiv.style.marginBottom = wObjStyle.marginBottom
234
-
235
- wOyaDiv.style.marginLeft = wObjStyle.marginLeft
236
-
237
- if(cmanOM_Obj[i].tagName.toLowerCase() == 'img'){
238
-
239
- wOyaDiv.style.display = 'inline-block';
240
-
241
- }
242
-
243
-
244
-
245
- // 対象オブジェクトのNodeを取得し、直前に親要素をタス
246
-
247
- var wParentDiv = cmanOM_Obj[i].parentNode;
248
-
249
- wParentDiv.insertBefore(wOyaDiv, cmanOM_Obj[i]);
250
-
251
-
252
-
253
- // 対象オブジェクトを一旦複写
254
-
255
- var wCopyNode = cmanOM_Obj[i].cloneNode(true);
256
-
257
-
258
-
259
- // コピーしたオブジェクトの設定
260
-
261
- wCopyNode.style.position = 'absolute';
262
-
263
- wCopyNode.style.top = 0;
264
-
265
- wCopyNode.style.left = 0;
266
-
267
- wCopyNode.style.margin = 0;
268
-
269
-
270
-
271
- // 登録した親要素の子要素として、対象オブジェクトを複写
272
-
273
- document.getElementById("cmanOM_ID_DMY"+i).appendChild(wCopyNode);
274
-
275
-
276
-
277
- // コピー元を削除
278
-
279
- cmanOM_Obj[i].parentNode.removeChild(cmanOM_Obj[i]);
280
-
281
-
282
-
283
- // 保存の対象オブジェクト一覧をコピー版に入れ替える
284
-
285
- cmanOM_Obj[i] = wCopyNode;
286
-
287
- }
288
-
289
-
290
-
291
-
292
-
293
- // ----- movearea(枠内のみ)の場合は、親要素の枠(area)を保存 --------------------
294
-
295
- wObjAt = cmanOM_Obj[i].getAttribute("cmanOMat");
296
-
297
-
298
-
299
- if(wObjAt.toLowerCase().match(/movearea/)){
300
-
301
-
302
-
303
- cmanOM_OyaObj[i] = '';
304
-
305
- var wOyaObj = cmanOM_Obj[i];
306
-
307
-
308
-
309
- for(var j = 0; j < 20; j++){
310
-
311
-
312
-
313
- wOyaObj = wOyaObj.parentNode;
314
-
315
-
316
-
317
- if((typeof wOyaObj === 'object')&&(wOyaObj.tagName.toLowerCase() != 'html')){
318
-
319
-
320
-
321
- wObjAt = wOyaObj.getAttribute("cmanOMat");
322
-
323
-
324
-
325
- if((wObjAt === null)||(wObjAt =='')){
326
-
327
- }else{
328
-
329
- if(wObjAt.toLowerCase().match(/area/)){
330
-
331
- cmanOM_OyaObj[i] = wOyaObj;
332
-
333
- break;
334
-
335
- }
336
-
337
- }
338
-
339
- }else{
340
-
341
- break;
342
-
343
- }
344
-
345
- }
346
-
347
- }
348
-
349
-
350
-
351
-
352
-
353
- // ----- movearea(枠内のみ)の場合は、親要素の枠(area)を保存 --------------------
354
-
355
- if (cmanOM_VAR['device'] == 'mobi') {
356
-
357
- // スマホなど
358
-
359
- cmanOM_Obj[i].ontouchstart = cmanOM_JS_mdown;
360
-
361
- cmanOM_Obj[i].ontouchend = cmanOM_JS_mup;
362
-
363
- cmanOM_Obj[i].ontouchmove = cmanOM_JS_mmove;
364
-
365
- }else{
366
-
367
- // パソコンなど
368
-
369
- cmanOM_Obj[i].onmousedown = cmanOM_JS_mdown;
370
-
371
- cmanOM_Obj[i].onmouseup = cmanOM_JS_mup;
372
-
373
- cmanOM_Obj[i].onmousemove = cmanOM_JS_mmove;
374
-
375
- cmanOM_Obj[i].onmouseout = cmanOM_JS_mout;
376
-
377
- }
378
-
379
-
380
-
381
-
382
-
383
- cmanOM_Obj[i].style.cursor = "pointer";
384
-
385
- cmanOM_Obj[i].setAttribute("cmanOMno", i);
386
-
387
-
388
-
389
- }
390
-
391
- }
392
-
393
-
394
-
395
- // =========================================================================================
396
-
397
- // マウス DOWN
398
-
399
- // =========================================================================================
400
-
401
- function cmanOM_JS_mdown(e){
402
-
403
-
404
-
405
- cmanOM_VAR['moveOn'] = false;
406
-
407
-
408
-
409
-
410
-
411
- // ----- 対象判定 ----------------------------------------------------------------
412
-
413
- var wTarget = e.target || e.srcElement;
414
-
415
- var wObjAt = wTarget.getAttribute("cmanOMat"); // DIVなどの場合、DIV内のタグは対象外
416
-
417
-
418
-
419
- if((wObjAt === null)||(wObjAt =='')){
420
-
421
- }else{
422
-
423
- if(wObjAt.toLowerCase().match(/move/)){
424
-
425
- cmanOM_VAR['moveOn'] = true;
426
-
427
- }
428
-
429
- }
430
-
431
-
432
-
433
- if(!cmanOM_VAR['moveOn']){return;}
434
-
435
-
436
-
437
-
438
-
439
- // ----- 画像の重ね合せ(前景/後景)の整理 --------------------------------------
440
-
441
- for(var i = 0; i < cmanOM_Obj.length; i++){
442
-
443
- if(cmanOM_Obj[i].style.zIndex != 1){
444
-
445
- cmanOM_Obj[i].style.zIndex = 1;
446
-
447
- }
448
-
449
- }
450
-
451
-
452
-
453
- // ----- 対象オブジェクトの情報保存 ----------------------------------------------
454
-
455
- cmanOM_VAR['objNowImg'] = wTarget; // 対象オブジェクト
456
-
457
-
458
-
459
- if (cmanOM_VAR['device'] == 'mobi') {
460
-
461
- cmanOM_VAR['sPosX'] = e.touches[0].pageX; // マウスがクリックされた位置
462
-
463
- cmanOM_VAR['sPosY'] = e.touches[0].pageY; // マウスがクリックされた位置
464
-
465
- }else{
466
-
467
- cmanOM_VAR['sPosX'] = e.pageX; // マウスがクリックされた位置
468
-
469
- cmanOM_VAR['sPosY'] = e.pageY; // マウスがクリックされた位置
470
-
471
- }
472
-
473
-
474
-
475
- if(cmanOM_VAR['objNowImg'].style.top == ''){
476
-
477
- cmanOM_VAR['sTop'] = 0;
478
-
479
- }else{
480
-
481
- cmanOM_VAR['sTop'] = parseInt(cmanOM_VAR['objNowImg'].style.top.replace("px", "")); // 対象オブジェクトのTop
482
-
483
- }
484
-
485
- if(cmanOM_VAR['objNowImg'].style.left == ''){
486
-
487
- cmanOM_VAR['sLeft'] = 0;
488
-
489
- }else{
490
-
491
- cmanOM_VAR['sLeft'] = parseInt(cmanOM_VAR['objNowImg'].style.left.replace("px", "")); // 対象オブジェクトのLeft
492
-
493
- }
494
-
495
-
496
-
497
- cmanOM_VAR['objNowImg'].style.zIndex = 2;
498
-
499
-
500
-
501
- return false;
502
-
503
- }
504
-
505
-
506
-
507
- // =========================================================================================
508
-
509
- // マウス UP
510
-
511
- // =========================================================================================
512
-
513
- function cmanOM_JS_mup(e){
514
-
515
-
516
-
517
- cmanOM_VAR['moveOn'] = false;
518
-
519
-
520
-
521
- }
522
-
523
-
524
-
525
- // =========================================================================================
526
-
527
- // マウス OUT
528
-
529
- // =========================================================================================
530
-
531
- function cmanOM_JS_mout(e){
532
-
533
-
534
-
535
- cmanOM_VAR['moveOn'] = false;
536
-
537
-
538
-
539
- }
540
-
541
-
542
-
543
- // =========================================================================================
544
-
545
- // マウスMOVE
546
-
547
- // =========================================================================================
548
-
549
- function cmanOM_JS_mmove(e){
550
-
551
-
552
-
553
- if(!cmanOM_VAR['moveOn']){return;}
554
-
555
-
556
-
557
-
558
-
559
- // ----- 対象オブジェクトのSTYLE -----------------------------------------------------
560
-
561
- var wObjStyle = window.getComputedStyle(cmanOM_VAR['objNowImg'].parentNode, null);
562
-
563
-
564
-
565
- var wObjNo = -1;
566
-
567
- var wObjAt = cmanOM_VAR['objNowImg'].getAttribute("cmanOMno");
568
-
569
- if((wObjAt === null)||(wObjAt =='')){
570
-
571
- }else{
572
-
573
- wObjNo = parseInt(wObjAt);
574
-
575
- }
576
-
577
-
578
-
579
-
580
-
581
- // ----- 移動位置を計算して設定 ------------------------------------------------------
582
-
583
- if (cmanOM_VAR['device'] == 'mobi') {
584
-
585
- cmanOM_VAR['objNowImg'].style.top = cmanOM_VAR['sTop'] - ( cmanOM_VAR['sPosY'] - e.touches[0].pageY) + 'px';
586
-
587
- cmanOM_VAR['objNowImg'].style.left = cmanOM_VAR['sLeft'] - ( cmanOM_VAR['sPosX'] - e.touches[0].pageX) + 'px';
588
-
589
- }else{
590
-
591
- cmanOM_VAR['objNowImg'].style.top = cmanOM_VAR['sTop'] - ( cmanOM_VAR['sPosY'] - e.pageY) + 'px';
592
-
593
- cmanOM_VAR['objNowImg'].style.left = cmanOM_VAR['sLeft'] - ( cmanOM_VAR['sPosX'] - e.pageX) + 'px';
594
-
595
- }
596
-
597
-
598
-
599
-
600
-
601
-
602
68
 
603
69
  ```
604
70
 
605
71
 
606
72
 
607
- **因みに、PDFファイルをブラウザ上に表示する際に画像ファイル.png,.jpgファイルに変換する設定はもかして可能なのでしょうか?**
73
+ ### 試たこと
608
74
 
609
75
 
610
76
 
77
+ accept="image/*,.pdf"をaccept="image/*,application/pdf"にしてみたが表示されない。
78
+
79
+
80
+
611
- なたかアドバイス頂けたら幸いです。よろしくお願いいたします。
81
+ ### 補足情報(FW/ツールのバージョンな
82
+
83
+ OS:Windows10

1

更新

2020/10/11 15:45

投稿

AtyAty
AtyAty

スコア9

test CHANGED
@@ -1 +1 @@
1
- Html,Css,Javascriptで作っ画像取得機能をブラザ上で自由移動させた
1
+ cmanOMat="move"をdivタグ内、input内、object内に入れてみがマ移動できな
test CHANGED
@@ -1,4 +1,4 @@
1
- ###Html,Css,Javascriptで作っ画像取得機能をブラザ上で自由移動させた
1
+ ###cmanOMat="move"をdivタグ内、input内、object内に入れてみがマ移動できな
2
2
 
3
3
 
4
4