判断input file图片宽度、大小最好的方法是用后端提交后来判断,但对应不会程序的朋友怎么办,门槛有点高。
之前有分享过一次利用JS来判断input file图片宽度教程,但有个BUG,当第一次触发change方法判断true时,第二次input file随意选择一个都不会再次触发判断。
所以我的站长站今天重新发布一段利用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框架哦。