Блог

Я создаю систему обмена сообщениями, и я недавно внедрил средство загрузки файлов, и мои функции javascript не работают, если я нажимаю кнопку ввода файла, а затем нажимаю «Отмена», в следующий раз, когда я загружаю файл, он делает это 3 раза. Это как если бы, поскольку я ничего не загружаю, они просто сидят там, а затем стекаются функции. Вот мой ввод :

 <input type="file" id="file" onclick="bro()"name="file" value="FILE UPLOAD" style="opacity: 0;z-index: 100000; bottom: 17.5px; position: fixed; right: 10px;">
  

И вот моя функция javascript

 function bro() {

    document.querySelector('#file').addEventListener('change', function(e) {
  var file = this.files[0];

  var fd = new FormData();
  fd.append("file", file);
  var xhr = new XMLHttpRequest();
  var group_id = document.getElementById('group_id').value;
  var fullurl = '../backend/sendvideosandimages.php?id='   group_id;
    xhr.open('POST', fullurl, true);
    xhr.onload = function() {
      if (this.status == 200) {
      };
  };
  xhr.send(fd);
}, true);
};
  

Проблема в том, что я не могу просто поместить функцию, потому что я использую ajax-запрос для отображения входных данных. Чтобы объяснить больше, поскольку я создаю систему обмена сообщениями, у меня есть боковая панель с идентификатором группы и именем группы. Я использую эту функцию :

 <script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxLoad(page, id, id2){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0 , Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('mainpage');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var queryString = "?id="   id   "amp;id2="   id2;
    //alert(page   queryString);
    ajaxRequest.open("GET", page   queryString, true);
    ajaxRequest.send(null);
}

//-->
</script>
  

Проблема в том, что если я добавлю прослушиватель изменения событий сам по себе, то это приведет к ошибкам, потому что при загрузке домашней страницы на главной странице еще нет ввода. И если я помещаю скрипт на главную страницу, он не выполняется

Это складывается из-за нескольких eventListeners . должно быть только 1 eventListeners .

Во-первых, выньте document.querySelector('#file').addEventListener из bro() функции.

Всякий раз, когда вы вызываете функцию. Это добавление новых change слушателей без удаления перед одним.

таким образом, кажется, что bro функция бесполезна;

Это сработает :

 document.querySelector('#file').addEventListener('change', function(e) {
  var file = this.files[0];

  var fd = new FormData();
  fd.append("file", file);
  var xhr = new XMLHttpRequest();
  var group_id = document.getElementById('group_id').value;
  var fullurl = '../backend/sendvideosandimages.php?id='   group_id;
    xhr.open('POST', fullurl, true);
    xhr.onload = function() {
      if (this.status == 200) {
      };
  };
  xhr.send(fd);
}, true);

//OR 

function bro() {
document.querySelector('#file').removeEventListener('change',(e)=>{console.log('removed listener')})
document.querySelector('#file').addEventListener('change', function(e) {
  var file = this.files[0];

  var fd = new FormData();
  fd.append("file", file);
  var xhr = new XMLHttpRequest();
  var group_id = document.getElementById('group_id').value;
  var fullurl = '../backend/sendvideosandimages.php?id='   group_id;
    xhr.open('POST', fullurl, true);
    xhr.onload = function() {
      if (this.status == 200) {
      };
  };
  xhr.send(fd);
}, true);
}

  

Удалите обработчик события изменения, а затем попробуйте.

Вам нужно удалить это: document.querySelector('#file').addEventListener('change'

Прямо сейчас у вас есть два события при загрузке файла.

1. Событие изменения.
2. Нажмите событие.

При нажатии добавляется событие изменения, следовательно, несколько загрузок.

Здесь вы можете либо удалить изменить код события, либо удалить прослушиватель событий при каждом нажатии.

Попробуйте эти исправления и посмотрите, работает ли это.