Javascript 如何从输入的多个文件中获取图像宽度和高度？

我想从Javascript或JQuery中的多个输入文件中获取每个图像的宽度和高度。我在谷歌上搜索，尝试了很多方法，但我找不到方法

这是我的密码：

<input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" style="display: none !important;" />

<input type="button" class="btn submit-btn" value="ファイル追加" onclick="document.getElementById('uploadBtn').click();" style="float: right;"/>

<input id="filename" type="hidden" />

以下是我的Javascript：

<script>
    document.getElementById("uploadBtn").onchange = function() {
      document.getElementById("uploadFile").value = this.value;
    };

    document.getElementById('uploadBtn').onchange = uploadOnChange;

    function uploadOnChange() {
       var filename = this.value;
       var lastIndex = filename.lastIndexOf("\\");
       if (lastIndex >= 0) {
          filename = filename.substring(lastIndex + 1);
       }
       var files = $('#uploadBtn')[0].files;
       for (var i = 0; i < files.length; i++) {
(function(i) {

    var extension = filename.split('.').pop();
    if (extension == 'pdf')
    {
        $("#upload_prev").append('<div><span><br><div class="col-md-10"><span class="uploadFiles">' + '<a href="">' + files[i].name + '</a>' + '</span><br><label class="filelink"></label></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></span></div>');
    }

    else if (extension == 'jpg' || extension == 'jpeg' || extension == 'png' || extension == 'gif')
    {
        $("#upload_prev").append('<div><span><br><div class="col-md-10"><span class="uploadFiles">' + '<a href="">' + files[i].name + '</a>' + '</span><br><label class="filelink"></label></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></span></div>');


    }
    else
    {
        $("#upload_prev").append('<div><span><br><div class="col-md-10"><span class="uploadFiles">' + files[i].name + '</a>' + '</span><br><label class="filelink"></label></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></span></div>');
    }

  $("#upload_prev a:contains(" + files[i].name + ")")
    .on("click", function(e) {
            e.preventDefault();

            var extension = filename.split('.').pop();
            if (!/(pdf)$/ig.test(extension))
            {   
                $('#imgPreview').modal('show');
                $("#imgPreviewLabel").text(files[i].name)
                    var close = $('#imgPreview').closest("div")
                    .find(".filelink");

                    close.append(
                  $('<img>', {
                    src: URL.createObjectURL(files[i])
                  }).width('100%').height('100%')
                )
            }
            else if (extension == 'pdf')
            {
                $('#pdfPreview').modal('show');
                $("#pdfPreviewLabel").text(files[i].name)
                var close = $('#pdfPreview').closest("div")
                    .find(".filelink");
                close.append(
                    $('<iframe>', {
                        src: URL.createObjectURL(files[i])
                    }).width('565px').height('400px')
                )
            }
        })
        $(".modal_close").on("click", function(e){
            $("#filelink img").remove();
            $("#filelink iframe").remove();
        })
        $('#imgPreview').on('hidden.bs.modal', function () {
            $("#filelink img").remove();
            $("#filelink iframe").remove();
        })
        $('#pdfPreview').on('hidden.bs.modal', function () {
            $("#filelink img").remove();
            $("#filelink iframe").remove();
        })
      })(i);
   }
    document.getElementById('filename').value = filename;
 }

document.getElementById（“uploadBtn”）.onchange=function（）{
document.getElementById（“uploadFile”）.value=this.value；
};
document.getElementById（'uploadBtn'）。onchange=uploadOnChange；
函数uploadOnChange（）{
var filename=this.value；
var lastIndex=filename.lastIndexOf（“\\”）；
如果（lastIndex>=0）{
filename=filename.substring（lastIndex+1）；
}
var files=$（'#uploadBtn'）[0]。文件；
对于（var i=0；i'++'
削除
 
”）；
}
else if（扩展名='jpg'| |扩展名=='jpeg'| |扩展名=='png'| |扩展名=='gif'）
{
$（“#upload_prev”）.append（'
'++'
削除
 
”）；
}
其他的
{
$（“#upload_prev”）。追加（'
'+文件[i]。名称+'+'
削除
 
”）；
}
$（“#upload_prev a:包含（“+文件[i].name+”）
.在“点击”时，功能（e）{
e、 预防默认值（）；
var扩展名=filename.split（'.'）.pop（）；
如果（！/（pdf）$/ig.test（扩展））
{   
$（'imgPreview'）.modal（'show'）；
$（“#imgPreviewLabel”）.text（文件[i].name）
var close=$（“#imgPreview”）.最近的（“div”）
.find（“.filelink”）；
close.append(
$('', {
src:URL.createObjectURL（文件[i]）
}).宽度（'565px'）。高度（'400px'））
)
}
})
$（“.modal_close”）。在（“click”上，函数（e）{
$（“#filelink img”）.remove（）；
$（“#filelink iframe”）.remove（）；
})
$（'#imgPreview'）.on（'hidden.bs.modal'，function（）{
$（“#filelink img”）.remove（）；
$（“#filelink iframe”）.remove（）；
})
$（'#pdfPreview'）.on（'hidden.bs.modal'，function（）{
$（“#filelink img”）.remove（）；
$（“#filelink iframe”）.remove（）；
})
})（i） )；
}
document.getElementById（'filename'）。value=filename；
}

您可以使用以下方法尝试获取多个上载图像文件的图像宽度和高度：

var _URL = window.URL || window.webkitURL;
$("#uploadBtn").change(function(e) {
    var file, img;
for(var i=0; i<this.files.length; i++){
if ((file = this.files[i])) {
    img = new Image();
    img.onload = function() {
        alert("width:"+this.width + " " + "height:" + this.height);
    };
    img.onerror = function() {
        alert( "not a valid file: " + file.type);
    };
    img.src = _URL.createObjectURL(file);
}
}
});

var URL=window.URL | | window.webkitURL；
$（“#uploadBtn”）.change（函数（e）{
var文件，img；
对于（var i=0；i）您的代码在哪里？我更新了我的代码。可能与