Javascript 比较上传图片的宽度和高度

我有一个文件输入图片，我想设置它的div的类取决于什么是更大的：它的宽度或高度

我的代码不仅在最后一个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");
    }
}

---

你的代码看起来不错。这里有一个工作片段

函数预览文件{ var preview=document.querySelector'img'；//选择名为img的查询 var file=document.querySelector'input[type=file]'.files[0]；//与此处相同 var reader=新文件读取器； reader.onloadend=函数{ preview.src=reader.result； } 如果文件{ reader.readAsDataURLfile；//将数据作为URL读取 }否则{ preview.src=； } 如果file.width问题是你有两个相同的ID。所有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>    

---

但在你的例子中，图片有一个1px的纯蓝色边框，但它应该有一个1px的纯红色边框。谢谢，说得好，我删除了第二个边框，但它仍然不起作用。你说的未定义是什么意思？现在看看我的答案，它起作用了。file.width在您询问时未定义。如果您有问题，请告诉我问题出在哪里？哦，是的，谢谢！我只是还没有看到它的第一部分。