アップロードされた画像の幅と高さを比較する

Question

私はファイル入力（画像）を持っていますが、widthまたはそのheightの内容に応じてdivのclassを設定します。

私のコードは動作しません（最後の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

だ問題は、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>  

Answer 2

あなたのコードは罰金です。ここで働いてスニペット

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>