jquery type="file"で選択した画像の縦横比を取得したい

input type="file"で画像選択を行い、選択された画像の縦横を取得したいのですが...

jquery
1$('#fileSelect').change(function() {
2    if(this.files.length > 0){
3        var param = new Object();
4        var reg = /(.*)(?:.([^.]+$))/;
5        console.log(this.files)
6        
7        
8        for(var i=0;i<this.files.length;i++){
9            console.log(this.files[i])
10            var fileName = this.files[i].name;
11            var originName = fileName.match(reg)[1];
12            var width;
13            var height;
14            
15            var image = new Image();
16            image.onload = function(){
17                width = image.naturalWidth;
18                height = image.naturalHeight;
19            }
20        }
21    }else{
22        return
23    }
24});

image.onloadで取得はできたのですが、image.onload = function(){});
の外に取得した結果を出したいのですがどうのようにやればよろしいでしょうか。

maisumakun

2018/11/30 06:00

取得できた結果をどのように使いたいのでしょうか。

行動規範の内容に同意します

回答1件

javascript
1<script>
2$(function(){
3  $('#fileSelect').on('change',function() {
4    var file = $(this).prop("files")[0];
5    var fr = new FileReader();
6    var image = new Image();
7    fr.onload = function(){
8      image.src=fr.result;
9      image.onload=function(){
10        console.log({width: image.naturalWidth, height: image.naturalHeight});
11      }
12    }
13    fr.readAsDataURL(file);
14  });
15});
16</script>
17<input type="file" id="fileSelect">