比較上傳圖片的寬度和高度

Question

我有一個文件輸入（圖片），我想根據更大的值設置其div的class ：其width或height 。

我的代碼不起作用（只有最后一個if語句），無論上傳的圖像如何， div的類都不會改變。

這是我的HTML：

<div class="row">
    <div class="col-md-12">
        <div id="blah" class="profilePic">
            <img src="profilkep.jpg" />
        </div>
    </div>
</div>

<br>

<div class="row">
    <div class="col-md-12">
        <input type="file" onchange="previewFile()">
    </div>
</div>

這是我的JavaScript：

function previewFile(){
    var preview = document.querySelector('img'); //selects the query named img
    var file    = document.querySelector('input[type=file]').files[0]; //sames as here
    var reader  = new FileReader();

    reader.onloadend = function () {
        preview.src = reader.result;
    }

    if (file) {
        reader.readAsDataURL(file); //reads the data as a URL
    } else {
        preview.src = "";
    }

    if (file.width < file.height) {
        document.getElementById("blah").setAttribute("class", "blahblah");
    } else {
        document.getElementById("blah").setAttribute("class", "profilePic");
    }
}

Answer 1

您的代碼似乎很好。 這是一個工作片段

 function previewFile(){ var preview = document.querySelector('img'); //selects the query named img var file = document.querySelector('input[type=file]').files[0]; //sames as here var reader = new FileReader(); reader.onloadend = function () { preview.src = reader.result; } if (file) { reader.readAsDataURL(file); //reads the data as a URL } else { preview.src = ""; } if (file.width < file.height) { document.getElementById("blah").setAttribute("class", "blahblah"); } else { document.getElementById("blah").setAttribute("class", "profilePic"); } } 

 .blahblah { border: 1px solid red; } .profilePic { border: 1px solid blue; } 

  <div class="row"> <div class="col-md-12"> <div id="blah" class="profilePic"> <img src="http://i.imgur.com/MxPGcXu.gif" /> </div> </div> </div> <br> <div class="row"> <div class="col-md-12" id="blah"> <input type="file" onchange="previewFile()"> </div> </div> 

Answer 2

問題是，你有兩個相同的ID blah 。 所有ID必須是唯一的。 file.width和file.height始終未定義。 解決方法是：

 <div class="row">
  <div class="col-md-12">
    <div id="blah">
      <img id="profileImage" src="profilkep.jpg" />
    </div>
  </div>
</div>

<br>

<div class="row">
  <div class="col-md-12">
    <input type="file" onchange="previewFile()">
  </div>
</div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript">
    function previewFile(){
        var preview = document.querySelector('img'); //selects the query named img
        var file    = document.querySelector('input[type=file]').files[0]; //sames as here
        var reader  = new FileReader();

        reader.onloadend = function () {
          preview.src = reader.result;
          var imageWidth = $('#profileImage').width();
          var imageHeight = $('#profileImage').height();
          if (imageWidth < imageHeight) {
          console.log('width < height');
          document.getElementById("blah").setAttribute("class", "blahblah");
        } else {
          console.log('width > height');
          document.getElementById("blah").setAttribute("class", "profilePic");
        }
        }

        if (file) {
          reader.readAsDataURL(file); //reads the data as a URL
        } else {
          preview.src = "";
        }

      }
    </script>