我無法使用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 。