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

回答編集履歴

3

追記

2017/01/09 21:00

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -26,6 +26,7 @@
26
26
  ```
27
27
  追記
28
28
  ---
29
+ Image()を使うことでwidth, heightが取得できると思いますが。
29
30
  ```HTML
30
31
  <!DOCTYPE html>
31
32
  <html lang="ja">
@@ -40,13 +41,13 @@
40
41
  <script>
41
42
  $(document).ready(function () {
42
43
  $("#fileUpload").on("change", function () {
43
- var fileReader = new FileReader();
44
+ let fileReader = new FileReader();
44
- fileReader.onload = function (e) {
45
+ fileReader.onload = function () {
45
46
  let image = new Image();
46
- image.src = e.target.result;
47
+ image.src = fileReader.result;//読み込まれたファイルの内容
47
48
  image.onload = function () {
48
49
  alert(image.width + " : " + image.height);
49
- $('#uploadImage').attr("src", e.target.result);
50
+ $('#uploadImage').attr("src", image.src);//画像のURLをソースに設定
50
51
  };
51
52
  };
52
53
  fileReader.readAsDataURL(this.files[0]);

2

追記

2017/01/09 21:00

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -13,7 +13,7 @@
13
13
  <script>
14
14
  $(document).ready(function () {
15
15
  $("#fileUpload").on("change", function () {
16
- var fileReader = new FileReader();
16
+ let fileReader = new FileReader();
17
17
  fileReader.onload = function (e) {
18
18
  $('#uploadImage').attr('src', e.target.result);
19
19
  };

1

追記

2017/01/09 20:48

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -23,4 +23,36 @@
23
23
  </script>
24
24
  </body>
25
25
  </html>
26
+ ```
27
+ 追記
28
+ ---
29
+ ```HTML
30
+ <!DOCTYPE html>
31
+ <html lang="ja">
32
+ <head>
33
+ <meta charset="utf-8">
34
+ <title>タイトル</title>
35
+ </head>
36
+ <body>
37
+ <input type="file" id="fileUpload">
38
+ <img src="#" id="uploadImage" alt="アップロード">
39
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
40
+ <script>
41
+ $(document).ready(function () {
42
+ $("#fileUpload").on("change", function () {
43
+ var fileReader = new FileReader();
44
+ fileReader.onload = function (e) {
45
+ let image = new Image();
46
+ image.src = e.target.result;
47
+ image.onload = function () {
48
+ alert(image.width + " : " + image.height);
49
+ $('#uploadImage').attr("src", e.target.result);
50
+ };
51
+ };
52
+ fileReader.readAsDataURL(this.files[0]);
53
+ });
54
+ });
55
+ </script>
56
+ </body>
57
+ </html>
26
58
  ```