Вопросы Теги

Я не могу передать параметры функции, используя addEventListener Javascript / JQuery

«Это» - все о сфере охвата. Каждая функция имеет свою собственную область действия, и поскольку все в JS является объектом, даже функция может хранить некоторые значения в себе, используя «this». 

$('#a').click(function(){
console.log($(this).attr('href'));
});
0
задан Arnell Vasquez C 13 July 2018 в 16:45
поделиться

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.

1
ответ дан Jakub Kosiński 17 August 2018 в 12:23
поделиться

Имейте функцию обратного вызова и в этом вызове ваш метод 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>

1
ответ дан Ashvin777 17 August 2018 в 12:23
поделиться
  • 1
    Я передал функцию как обратный вызов, но теперь значения не вводятся. – Arnell Vasquez C 13 July 2018 в 16:46
Другие вопросы по тегам:

Похожие вопросы: