teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

変更

2020/10/11 16:38

投稿

AtyAty
AtyAty

スコア9

title CHANGED
@@ -1,1 +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で表示できない。
body CHANGED
File without changes

4

更新

2020/10/11 16:37

投稿

AtyAty
AtyAty

スコア9

title CHANGED
File without changes
body CHANGED
@@ -25,9 +25,9 @@
25
25
  Javascript(preview02.js)
26
26
  ```ここに言語を入力
27
27
   document.querySelector("#file").addEventListener("change", function(e){
28
- const file = e.target.files[0];
28
+ const file = e.target.files[0];
29
-    const filereader = new FileReader();
29
+ const filereader = new FileReader();
30
-    filereader.addEventListener("load",function(event){
30
+ filereader.addEventListener("load",function(event){
31
31
   document.querySelector('#preview02').setAttribute("src", event.target.result);
32
32
     });
33
33
     filereader.readAsDataURL(file);//実際にファイル内容を読み込むための記述

3

変更

2020/10/11 15:48

投稿

AtyAty
AtyAty

スコア9

title CHANGED
File without changes
body CHANGED
@@ -26,12 +26,12 @@
26
26
  ```ここに言語を入力
27
27
   document.querySelector("#file").addEventListener("change", function(e){
28
28
  const file = e.target.files[0];
29
- const filereader = new FileReader();
29
+    const filereader = new FileReader();
30
- filereader.addEventListener("load",function(event){
30
+    filereader.addEventListener("load",function(event){
31
- document.querySelector('#preview02').setAttribute("src", event.target.result);
31
+  document.querySelector('#preview02').setAttribute("src", event.target.result);
32
- });
32
+    });
33
- filereader.readAsDataURL(file);//実際にファイル内容を読み込むための記述
33
+    filereader.readAsDataURL(file);//実際にファイル内容を読み込むための記述
34
- });
34
+    });
35
35
  ```
36
36
 
37
37
  ### 試したこと

2

変更

2020/10/11 15:46

投稿

AtyAty
AtyAty

スコア9

title CHANGED
@@ -1,1 +1,1 @@
1
- cmanOMat="move"をdivタグ内、input内、object内に入れてみがマウス移動できない。
1
+ <input type="file" name="file" id="file" accept="image/*,.pdf">で取得し画像をFileReader表示できない。
body CHANGED
@@ -1,306 +1,42 @@
1
- ###cmanOMat="move"をdivタグ内、input内、object内入れてみがマウス移動できない。
1
+ ### <input type="file" name="file" id="file" accept="image/*,.pdf">で取得した.PDFファイルブラウザ上表示したい。
2
2
 
3
- PDFファイルを参照から取得し、ブラウザー上で表示するものを作成し、それをもう一つのPDFファイル表示画面に移動して重ね、重ねた状態で下のPDFファイルが透けて見える、という機能を作成奮闘しています。
4
3
 
5
- ※現在のブラウザ上の表示画面を添付します。
6
- ![イメージ説明](ce607ec3ef37bdf858960f57bf2d2810.png)
7
4
 
8
- ### コード
9
- HTML(index.html) 下のPDF表示のコードです。
10
- ```
11
- <div id="preview1">
12
- <div>
13
- <input type="file" name="upload_file" id="file2" >
14
- <object data="{path_to_file}" id="objects2" width="500px" height="500px"></object>
15
- </div>
5
+ ### 発生している問題・エラーメッセージ
16
- </div>
17
6
 
7
+
18
8
  ```
19
- Javascript (file2.js)
20
- ```
21
- window.addEventListener('load', () => {
22
- const f = document.getElementById('file2');
23
- f.addEventListener('change', evt => {
24
- let input = evt.target;
25
- if (input.files.length == 0) {
26
- console.log('No file selected');
9
+ .png, .Jpgファイルは表示できるのに、.pdfファイルは表示できない。
27
- return;
28
- }
29
- const file = input.files[0];
30
- const reader = new FileReader();
31
- reader.onload = () => {
32
- const object = document.getElementById('objects2');
33
- object.setAttribute("data",reader.result);
34
- };
35
- reader.readAsDataURL(file);
36
- });
37
- });
38
10
 
39
11
  ```
40
12
 
41
- ### 試したことがダメだった事
13
+ ### 該当のソースコード
42
- 使用したJS:cmanObjMove_v091.js
43
- 参考サイト:https://web-designer.cman.jp/javascript_ref/mouse/move/
44
14
 
15
+ ```ここに言語名を入力
16
+   <div >
17
+ <input type="file" name="file" id="file" accept="image/*,.pdf" capture="camera">
45
- ①JSファイルの中のvar wTargetTag = [ 'img', 'div'];にinput、objectのタグを追加してみた。
18
+ <img src="" alt="" id="preview02" cmanOMat="move">
19
+ </div>
20
+
46
- ②cmanOMat="move"をdivタグ内、input内、object内に入れてみた。
21
+ <script src="preview02.js" charset="utf-8"></script>
47
22
 
23
+ ```
48
24
 
25
+ Javascript(preview02.js)
26
+ ```ここに言語を入力
27
+  document.querySelector("#file").addEventListener("change", function(e){
28
+ const file = e.target.files[0];
49
- ### cmanObjMove_v091.js (一部文字数オーバーのため省略)
29
+ const filereader = new FileReader();
50
-
30
+ filereader.addEventListener("load",function(event){
31
+ document.querySelector('#preview02').setAttribute("src", event.target.result);
32
+ });
33
+ filereader.readAsDataURL(file);//実際にファイル内容を読み込むための記述
34
+ });
51
35
  ```
52
- // ----- 初期イベントの登録 --------------------------------------------------------------
53
- if ( window.addEventListener ){window.addEventListener('load', cmanOM_JS_init, false);}
54
- else if( window.attachEvent ) {window.attachEvent( 'onload', cmanOM_JS_init );}
55
36
 
56
- 省略=========================================================================================
57
- // 初期処理(オンロード時)
37
+ ### 試したこと
58
38
 
59
- function cmanOM_JS_init(){
39
+ accept="image/*,.pdf"をaccept="image/*,application/pdf"にしてみたが表示されない。
60
40
 
61
- // 対象のタグ(追加すれば移動対象となる)
62
- var wTargetTag = [ 'img', 'div' ];
63
- var wTagList = [];
64
- var wObjAt;
65
-
66
- cmanOM_VAR['moveOn'] = false;
67
-
68
-
69
- if ("ontouchstart" in window) {
70
- cmanOM_VAR['device'] ='mobi';
71
- }else{
72
- cmanOM_VAR['device'] ='pc';
73
- }
74
-
75
-
76
- // ----- 対象タグの一覧を配列に格納 --------------------------------------------------
77
- for(var i = 0; i < wTargetTag.length; i++){
78
-
79
- var wHtmlCollection = document.getElementsByTagName(wTargetTag[i]);
80
-
81
- for(var j = 0; j < wHtmlCollection.length; j++){
82
- wTagList.push( wHtmlCollection[j] );
83
- }
84
- }
85
-
86
- // ----- 対象タグの一覧より対象オブジェクト(cmanOMatの属性あり)を抽出する -----------
87
- for(var i = 0; i < wTagList.length; i++){
88
-
89
- wObjAt = wTagList[i].getAttribute("cmanOMat");
90
-
91
- if((wObjAt === null)||(wObjAt =='')){
92
- }else{
93
- if(wObjAt.toLowerCase().match(/move/)){
94
- cmanOM_Obj.push( wTagList[i] ); // 移動対象のオブジェクトを保存
95
- }
96
- }
97
- }
98
-
99
-
100
- // ----- 対象オブジェクトを移動可能な状態に整備する ----------------------------------
101
- for(var i = 0; i < cmanOM_Obj.length; i++){
102
-
103
- // ----- absolute以外の場合は、親要素を作成し位置ずれしないように調整 ------------
104
- if(cmanOM_Obj[i].style.position.toLowerCase() != 'absolute'){
105
-
106
- // 対象オブジェクトのSTYLE
107
- var wObjStyle = window.getComputedStyle(cmanOM_Obj[i], null);
108
-
109
- // 親要素の作成
110
- var wOyaDiv = document.createElement("div");
111
- wOyaDiv.setAttribute("id", "cmanOM_ID_DMY"+i);
112
- wOyaDiv.style.position = 'relative';
113
- wOyaDiv.style.width = cmanOM_Obj[i].offsetWidth + 'px'; // 大きさとmarginは元オブジェクトよりコピー
114
- wOyaDiv.style.height = cmanOM_Obj[i].offsetHeight + 'px';
115
- wOyaDiv.style.marginTop = wObjStyle.marginTop
116
- wOyaDiv.style.marginRight = wObjStyle.marginRight
117
- wOyaDiv.style.marginBottom = wObjStyle.marginBottom
118
- wOyaDiv.style.marginLeft = wObjStyle.marginLeft
119
- if(cmanOM_Obj[i].tagName.toLowerCase() == 'img'){
120
- wOyaDiv.style.display = 'inline-block';
121
- }
122
-
123
- // 対象オブジェクトのNodeを取得し、直前に親要素をタス
124
- var wParentDiv = cmanOM_Obj[i].parentNode;
125
- wParentDiv.insertBefore(wOyaDiv, cmanOM_Obj[i]);
126
-
127
- // 対象オブジェクトを一旦複写
128
- var wCopyNode = cmanOM_Obj[i].cloneNode(true);
129
-
130
- // コピーしたオブジェクトの設定
131
- wCopyNode.style.position = 'absolute';
132
- wCopyNode.style.top = 0;
133
- wCopyNode.style.left = 0;
134
- wCopyNode.style.margin = 0;
135
-
136
- // 登録した親要素の子要素として、対象オブジェクトを複写
137
- document.getElementById("cmanOM_ID_DMY"+i).appendChild(wCopyNode);
138
-
139
- // コピー元を削除
140
- cmanOM_Obj[i].parentNode.removeChild(cmanOM_Obj[i]);
141
-
142
- // 保存の対象オブジェクト一覧をコピー版に入れ替える
143
- cmanOM_Obj[i] = wCopyNode;
144
- }
145
-
146
-
147
- // ----- movearea(枠内のみ)の場合は、親要素の枠(area)を保存 --------------------
148
- wObjAt = cmanOM_Obj[i].getAttribute("cmanOMat");
149
-
150
- if(wObjAt.toLowerCase().match(/movearea/)){
151
-
152
- cmanOM_OyaObj[i] = '';
153
- var wOyaObj = cmanOM_Obj[i];
154
-
155
- for(var j = 0; j < 20; j++){
156
-
157
- wOyaObj = wOyaObj.parentNode;
158
-
159
- if((typeof wOyaObj === 'object')&&(wOyaObj.tagName.toLowerCase() != 'html')){
160
-
161
- wObjAt = wOyaObj.getAttribute("cmanOMat");
162
-
163
- if((wObjAt === null)||(wObjAt =='')){
164
- }else{
165
- if(wObjAt.toLowerCase().match(/area/)){
166
- cmanOM_OyaObj[i] = wOyaObj;
167
- break;
168
- }
169
- }
170
- }else{
171
- break;
172
- }
173
- }
174
- }
175
-
176
-
177
- // ----- movearea(枠内のみ)の場合は、親要素の枠(area)を保存 --------------------
178
- if (cmanOM_VAR['device'] == 'mobi') {
179
- // スマホなど
180
- cmanOM_Obj[i].ontouchstart = cmanOM_JS_mdown;
181
- cmanOM_Obj[i].ontouchend = cmanOM_JS_mup;
182
- cmanOM_Obj[i].ontouchmove = cmanOM_JS_mmove;
183
- }else{
184
- // パソコンなど
41
+ ### 補足情報(FW/ツールのバージョンなど
185
- cmanOM_Obj[i].onmousedown = cmanOM_JS_mdown;
186
- cmanOM_Obj[i].onmouseup = cmanOM_JS_mup;
187
- cmanOM_Obj[i].onmousemove = cmanOM_JS_mmove;
188
- cmanOM_Obj[i].onmouseout = cmanOM_JS_mout;
189
- }
190
-
191
-
192
- cmanOM_Obj[i].style.cursor = "pointer";
193
- cmanOM_Obj[i].setAttribute("cmanOMno", i);
194
-
195
- }
196
- }
197
-
198
- // =========================================================================================
199
- // マウス DOWN
200
- // =========================================================================================
201
- function cmanOM_JS_mdown(e){
202
-
203
- cmanOM_VAR['moveOn'] = false;
204
-
205
-
206
- // ----- 対象判定 ----------------------------------------------------------------
207
- var wTarget = e.target || e.srcElement;
208
- var wObjAt = wTarget.getAttribute("cmanOMat"); // DIVなどの場合、DIV内のタグは対象外
209
-
210
- if((wObjAt === null)||(wObjAt =='')){
211
- }else{
212
- if(wObjAt.toLowerCase().match(/move/)){
213
- cmanOM_VAR['moveOn'] = true;
214
- }
215
- }
216
-
217
- if(!cmanOM_VAR['moveOn']){return;}
218
-
219
-
220
- // ----- 画像の重ね合せ(前景/後景)の整理 --------------------------------------
221
- for(var i = 0; i < cmanOM_Obj.length; i++){
222
- if(cmanOM_Obj[i].style.zIndex != 1){
223
- cmanOM_Obj[i].style.zIndex = 1;
224
- }
225
- }
226
-
227
- // ----- 対象オブジェクトの情報保存 ----------------------------------------------
228
- cmanOM_VAR['objNowImg'] = wTarget; // 対象オブジェクト
229
-
230
- if (cmanOM_VAR['device'] == 'mobi') {
231
- cmanOM_VAR['sPosX'] = e.touches[0].pageX; // マウスがクリックされた位置
232
- cmanOM_VAR['sPosY'] = e.touches[0].pageY; // マウスがクリックされた位置
233
- }else{
234
- cmanOM_VAR['sPosX'] = e.pageX; // マウスがクリックされた位置
235
- cmanOM_VAR['sPosY'] = e.pageY; // マウスがクリックされた位置
236
- }
237
-
238
- if(cmanOM_VAR['objNowImg'].style.top == ''){
239
- cmanOM_VAR['sTop'] = 0;
240
- }else{
241
- cmanOM_VAR['sTop'] = parseInt(cmanOM_VAR['objNowImg'].style.top.replace("px", "")); // 対象オブジェクトのTop
242
- }
243
- if(cmanOM_VAR['objNowImg'].style.left == ''){
244
- cmanOM_VAR['sLeft'] = 0;
245
- }else{
246
- cmanOM_VAR['sLeft'] = parseInt(cmanOM_VAR['objNowImg'].style.left.replace("px", "")); // 対象オブジェクトのLeft
247
- }
248
-
249
- cmanOM_VAR['objNowImg'].style.zIndex = 2;
250
-
251
- return false;
42
+ OS:Windows10
252
- }
253
-
254
- // =========================================================================================
255
- // マウス UP
256
- // =========================================================================================
257
- function cmanOM_JS_mup(e){
258
-
259
- cmanOM_VAR['moveOn'] = false;
260
-
261
- }
262
-
263
- // =========================================================================================
264
- // マウス OUT
265
- // =========================================================================================
266
- function cmanOM_JS_mout(e){
267
-
268
- cmanOM_VAR['moveOn'] = false;
269
-
270
- }
271
-
272
- // =========================================================================================
273
- // マウスMOVE
274
- // =========================================================================================
275
- function cmanOM_JS_mmove(e){
276
-
277
- if(!cmanOM_VAR['moveOn']){return;}
278
-
279
-
280
- // ----- 対象オブジェクトのSTYLE -----------------------------------------------------
281
- var wObjStyle = window.getComputedStyle(cmanOM_VAR['objNowImg'].parentNode, null);
282
-
283
- var wObjNo = -1;
284
- var wObjAt = cmanOM_VAR['objNowImg'].getAttribute("cmanOMno");
285
- if((wObjAt === null)||(wObjAt =='')){
286
- }else{
287
- wObjNo = parseInt(wObjAt);
288
- }
289
-
290
-
291
- // ----- 移動位置を計算して設定 ------------------------------------------------------
292
- if (cmanOM_VAR['device'] == 'mobi') {
293
- cmanOM_VAR['objNowImg'].style.top = cmanOM_VAR['sTop'] - ( cmanOM_VAR['sPosY'] - e.touches[0].pageY) + 'px';
294
- cmanOM_VAR['objNowImg'].style.left = cmanOM_VAR['sLeft'] - ( cmanOM_VAR['sPosX'] - e.touches[0].pageX) + 'px';
295
- }else{
296
- cmanOM_VAR['objNowImg'].style.top = cmanOM_VAR['sTop'] - ( cmanOM_VAR['sPosY'] - e.pageY) + 'px';
297
- cmanOM_VAR['objNowImg'].style.left = cmanOM_VAR['sLeft'] - ( cmanOM_VAR['sPosX'] - e.pageX) + 'px';
298
- }
299
-
300
-
301
-
302
- ```
303
-
304
- **因みに、PDFファイルをブラウザ上に表示する際に画像ファイル.png,.jpgファイルに変換する設定はもしかして可能なのでしょうか?**
305
-
306
- どなたかアドバイス頂けたら幸いです。よろしくお願いいたします。

1

更新

2020/10/11 15:45

投稿

AtyAty
AtyAty

スコア9

title CHANGED
@@ -1,1 +1,1 @@
1
- Html,Css,Javascriptで作った画像取得機能ブラザ上で自由移動させた
1
+ cmanOMat="move"divタグ内、input内、object内に入れてみたがマ移動できな
body CHANGED
@@ -1,4 +1,4 @@
1
- ###Html,Css,Javascriptで作った画像取得機能ブラザ上で自由移動させた
1
+ ###cmanOMat="move"divタグ内、input内、object内に入れてみたがマ移動できな
2
2
 
3
3
  PDFファイルを参照から取得し、ブラウザー上で表示するものを作成し、それをもう一つのPDFファイル表示画面に移動して重ね、重ねた状態で下のPDFファイルが透けて見える、という機能を作成奮闘しています。
4
4