网站开发

包含所有网站建设开发相关的教程内容,如CSS教程,JS教程,html教程,服务器配置,域名空间的购买教程.

JS判断input file图片宽度完美兼容版

发表于:2019-08-22 点击: 栏目:

网站开发

收藏(0)

判断input file图片宽度、大小最好的方法是用后端提交后来判断,但对应不会程序的朋友怎么办,门槛有点高。

之前有分享过一次利用JS来判断input file图片宽度教程,但有个BUG,当第一次触发change方法判断true时,第二次input file随意选择一个都不会再次触发判断。

jQuery获取file控件中图片的宽高与大小

jQuery获取file控件中图片的宽高与大小

网站开发

jQuery获取file宽高的代码如下,仅在火狐中测试了,其他浏览器兼容性未知。var _URL = win...

点击查看

所以精准像素今天重新发布一段利用JS判断input file图片宽度代码,支持IE,并且兼容change方法重复触发。

<input type="file" name="titlepicfile" size="60">
<script type="text/javascript">
$(document).ready(function(){     
window.onload = function(){ 
var _URL = window.URL || window.webkitURL;
$(document).off('change','input[name=titlepicfile]').on('change','input[name=titlepicfile]',function(e){
  var file, img;
  if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
if(this.width != 220 && this.height != 145){
alert("上传图片尺寸不为220x145");
file = $("input[name='titlepicfile']"); 
file.val("");
file.after(file.clone());  
file.remove();  
}
};
img.src = _URL.createObjectURL(file);
  }
});
}
})
</script>

记得引入jquery框架哦。