[英]I can not pass parameters to a function using addEventListener Javascript/Jquery
I am doing a validator of images in BASE64 and I have problems to be able to pass parameters to my function. 我正在使用BASE64中的图像验证器,并且在将参数传递给函数时遇到问题。
Using pure javascript and using an event of type change and without parameters to the function, it is executed correctly. 使用纯JavaScript并使用类型更改的事件并且该函数没有参数,它可以正确执行。 But when passing a parameter, it falls completely.
但是,当传递参数时,它会完全掉落。
I have also tried to use jquery to handle the "Change" but I have not been successful either. 我也尝试过使用jquery处理“更改”,但是我也没有成功。
I have left the code as it works well and leave commented the parameter. 我已经离开了代码,因为它运行良好,并在参数中留下了注释。
NEW: I have passed the function as callback, but now values do not enter 新: 我已经将函数作为回调传递了,但是现在值不输入了
//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>
Have a callback function and in that call your validFile()
method. 有一个回调函数,并在其中调用您的
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>
When you add an event listener, it receives the event as argument so you can get the target and check its attributes: 添加事件侦听器时,它会将事件作为参数接收,因此您可以获取目标并检查其属性:
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>
Your code didn't work because the callback function was not bound to the input field, so that this.files
was undefined
. 您的代码无法正常工作,因为回调函数未绑定到输入字段,因此
this.files
是undefined
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.