Question

我想从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;
 }

Answer 1

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

''.join([t for t in <filenmae> if t.isalnum()]).encode('ascii', 'ignore'))

如何从Multiples Files输入获取图像宽度和高度？

1 个答案: