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

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：js教程 JS判断

要实现一个JS判断input file图片宽度的完美兼容版，可以使用以下代码： ```javascript function getImageWidth(file) { return new Promise((resolve, reject) => { const img = new Image(); img.src = URL.createObjectURL(file); img.onload = () => { URL.revokeObjectURL(img.src); resolve(img.width); }; img.onerror = (e) => { reject(e); }; }); } document.getElementById("fileInput").addEventListener("change", async (e) => { const file = e.target.files[0]; try { const width = await getImageWidth(file); console.log("图片宽度：", width); } catch (error) {

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

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

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

<inputtype="file"name="titlepicfile"size="60"><scripttype="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){varfile,img;if((file=this.files[0])){img=newImage();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框架哦。