我无法使用addEventListener Javascript / Jquery将参数传递给函数

Question

我正在使用BASE64中的图像验证器，并且在将参数传递给函数时遇到问题。

使用纯JavaScript并使用类型更改的事件并且该函数没有参数，它可以正确执行。 但是，当传递参数时，它会完全掉落。

我也尝试过使用jquery处理“更改”，但是我也没有成功。

我已经离开了代码，因为它运行良好，并在参数中留下了注释。

新： 我已经将函数作为回调传递了，但是现在值不输入了

 //USE THIS IMAGE FOR EXAMPLE https://i.imgur.com/GxUIEH2.png function validFile(parameter) { //if use change with jquery add parameter in validFile if (this.files && this.files[0]) { var pixels = parameter.split("x"); alert(pixels); var FR = new FileReader(); FR.onload = function(e) { /*To validation*/ var imgData = e.target.result; var segmentaImgData = imgData.trim().split("/"); var validaImg = segmentaImgData[1].substring(0, 3); if (validaImg == "jpg" || validaImg == "jpe" || validaImg == "png" || validaImg == "gif" || validaImg == "gif") { /*Start validating the image size*/ var iconoImagen = new Image(); iconoImagen.id = "miIcon"; iconoImagen.src = "" + imgData + ""; iconoImagen.onload = function() { if (this.width == 34 /*pixels[0]*/ && this.height == 26 /*pixels[1]*/) { /*If the image complies with the size, insert it in the input*/ $("#inputValueBase64").val(imgData); $("#txt").html(imgData) alert("The image meets the right size"); } else { alert("The image does not meet the right size"); return false; /**/ } }; } else { alert("unsupported format"); $("#inp").val(''); return false; } }; FR.readAsDataURL(this.files[0]); } else { alert("NOT PASS USING THIS METHOD"); } } document.getElementById("inp").addEventListener("change", function () {validFile('34x26')}, false); /*$("#inp").change(function () { alert("Changed!"); validFile('34x26') });*/ 

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="inp" type='file'> <input type="hidden" id="inputValueBase64"> <p id="txt"></p> 

Answer 1

有一个回调函数，并在其中调用您的validFile()方法。

 //USE THIS IMAGE FOR EXAMPLE https://i.imgur.com/GxUIEH2.png function validFile() { //if use change with jquery add parameter in validFile if (this.files && this.files[0]) { //var pixels = parameter.split("x"); var FR = new FileReader(); FR.onload = function(e) { /*To validation*/ var imgData = e.target.result; var segmentaImgData = imgData.trim().split("/"); var validaImg = segmentaImgData[1].substring(0, 3); if (validaImg == "jpg" || validaImg == "jpe" || validaImg == "png" || validaImg == "gif" || validaImg == "gif") { /*Start validating the image size*/ var iconoImagen = new Image(); iconoImagen.id = "miIcon"; iconoImagen.src = "" + imgData + ""; iconoImagen.onload = function() { if (this.width == 34 /*pixels[0]*/ && this.height == 26 /*pixels[1]*/) { /*If the image complies with the size, insert it in the input*/ $("#inputValueBase64").val(imgData); $("#txt").html(imgData) alert("The image meets the right size"); } else { alert("The image does not meet the right size"); return false; /**/ } }; } else { alert("unsupported format"); $("#inp").val(''); return false; } }; FR.readAsDataURL(this.files[0]); } else { alert("NOT PASS USING THIS METHOD"); } } document.getElementById("inp").addEventListener("change", function(){ validFile('pass here whatever you want'); }, false); /*$("#inp").change(function () { alert("Changed!"); validFile('34x26') });*/ 

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="inp" type='file'> <input type="hidden" id="inputValueBase64"> <p id="txt"></p> 

Answer 2

添加事件侦听器时，它会将事件作为参数接收，因此您可以获取目标并检查其属性：

 function validFile(event) { if (event.target.files && event.target.files[0]) { //var pixels = parameter.split("x"); var FR = new FileReader(); FR.onload = function(e) { var imgData = e.target.result; var segmentaImgData = imgData.trim().split("/"); var validaImg = segmentaImgData[1].substring(0, 3); if (validaImg == "jpg" || validaImg == "jpe" || validaImg == "png" || validaImg == "gif" || validaImg == "gif") { /*Start validating the image size*/ var iconoImagen = new Image(); iconoImagen.id = "miIcon"; iconoImagen.src = "" + imgData + ""; iconoImagen.onload = function() { if (this.width == 34 /*pixels[0]*/ && this.height == 26 /*pixels[1]*/) { /*If the image complies with the size, insert it in the input*/ $("#inputValueBase64").val(imgData); $("#txt").html(imgData) alert("The image meets the right size"); } else { alert("The image does not meet the right size"); return false; /**/ } }; } else { alert("unsupported format"); $("#inp").val(''); return false; } }; FR.readAsDataURL(event.target.files[0]); } else { alert("NOT PASS USING THIS METHOD"); } } document.getElementById("inp").addEventListener("change", validFile, false); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="inp" type='file'> <input type="hidden" id="inputValueBase64"> <p id="txt"></p> 

您的代码无法正常工作，因为回调函数未绑定到输入字段，因此this.files是undefined 。