使用javascript控制客户端的高度和宽度

使用javascript控制客户端的高度和宽度,javascript,controls,Javascript,Controls,这是我的表格 <form action="#" enctype="multipart/form-data" method="post" name="..." id="formPhoto" class="fmp"> <input type="file" name="pho" id="photo" class="inph" accept="image/*"> <button type="submit" id="subFormPhoto"

这是我的表格

<form action="#" enctype="multipart/form-data" method="post" name="..." id="formPhoto" class="fmp">
        <input type="file" name="pho" id="photo" class="inph" accept="image/*">
        <button type="submit" id="subFormPhoto" class="spp">press here</button>
</form>

按这里
这是我的代码

<script type="text/javascript">
    var inputPhoto= document.getElementById('photo');
    inputPhoto.onchange=function(){var photo= this.value; photo.onload=function(){alert(this.width+' '+this.height);};};
</script>

var inputPhoto=document.getElementById('photo');
inputPhoto.onchange=function(){var photo=this.value;photo.onload=function(){alert(this.width+''+this.height);};};
我的问题是没有可视化
警报(this.width+''+this.height)
就像不加载照片一样,
这个.value
以字符串的形式给出文件名,因此你的
photo.onload
函数实际上不是在查看照片,而是查看一些字符串。如果你
alert
console.log
photo
你就会明白我的意思

<>你可能想考虑一下,它将与HTML浏览器5的现代浏览器一起工作。 下面是代码的一个工作示例:

var inputPhoto = document.getElementById('photo');

inputPhoto.onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  var photo  = new Image();

  reader.readAsDataURL(file);
  reader.onload = function(_file) {
    photo.src = _file.target.result;
    photo.onload = function() {
      alert(this.width + ' ' + this.height);
    };
  };
};

我试图创造出我从你的问题中理解的东西


函数myFunction(){ var x=document.getElementById(“照片”); var file=x.files[0]; var reader=new FileReader(); reader.readAsDataURL(文件); reader.onload=函数(\u文件){ var img=document.getElementById(“视图”); setAttribute(“src”,_file.target.result); var高度=离地高度; var宽度=img.offsetWidth; 警报(宽度+X+高度); }; }
看看这是不是你要找的。 选择图像时调用输入的更改事件。读取图像字节并将其放入图像标记中。然后从图像组件的高度和宽度获取图像的尺寸。 您可以通过添加可见性:hidden或不透明度:0的css样式来隐藏图像 不显示:无,因为这将导致高度和宽度为0px


最后,尺寸标注显示在警报中。

其中是id为“insPhotoAlert”的元素。你能把问题说清楚一点吗?对不起,我调整了。我想查看输入照片的宽度和高度
 <input type="file" name="pho" id="photo" class="inph" onchange="myFunction()">
<img id="view" src=""></img>    
<p id="demo"></p>


 <script>
 function myFunction() {
var x = document.getElementById("photo");
var file = x.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(_file) {
 var img = document.getElementById("view");
 img.setAttribute("src",_file.target.result);
 var height = img.offsetHeight;
 var width = img.offsetWidth;
 alert(width + " X " + height);

 };
  }
</script>