JavaScript的檢測變化對所附文件輸入

Question

我產生的形式，當用戶按下與此代碼的按鈕：

var sql = "SELECT * FROM categories WHERE ID = " + id; 
    var result = db.query(sql, {json:true}); 
    var obj = JSON.parse(result); 
    var parsedlength = arrLenght(obj); 

    var main = document.getElementById('main'); 
    var modal = document.createElement('div'); 

    for(var i = 0; i < parsedlength; i++) { 
     var object = obj[i]; 
     for (var key in object) { 
      if(object.hasOwnProperty(key)) { 
       modal.className = 'modal fade bd-example-modal-lg'; 
       modal.id = "editModal"; 
       modal.role = "dialog"; 
       modal.innerHTML = '<div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header">'+ 
         '<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="deleteElement(\'editModal\')">'+ 
          '<span aria-hidden="true">&times;</span>'+ 
         '</button>'+ 
         '<h4 class="modal-title">Bewerken van categorie: ' + object['ConName'] + '</h4>'+ 
        '</div>'+ 
        '<div class="modal-body" style="background-image: url(\'' + object['img'] + '\')">'+ 
        '<div class="row">'+ 
        '<label for="cat-name" class="col-md-12 col-xs-12 col-form-label">Naam:</label>'+ 
         '<div class="col-md-12 col-xs-12">'+ 

          '<input class="form-control" type="text" value="' + object['ConName'] + '" placeholder="Categorie" id="cat-name" name="cat-name">'+ 
         '</div>'+ 
         '<label for="cat-name" class="col-md-12 col-xs-12 col-form-label">Afbeelding:</label>'+ 
         '<div class="col-md-9 col-xs-12">'+ 
          '<input type="text" name="cat-path-show" id="cat-path-show" class="form-control" placeholder="afbeelding" readonly>'+ 
          '<input type="file" name="cat_path_update" id="cat-path-update" style="position: absolute; top:-10000px;">'+ 
         '</div>'+ 
         '<div class="col-md-3 col-xs-12"><button id="update-cat-img" class="btn btn-info" onclick="updateList()">afbeelding kiezen</button></div>'+ 
        '</div>'+ 
        '</div>'+ 
        '<div class="modal-footer">'+ 
         '<div class="btn-group">'+ 
          '<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="deleteElement(\'editModal\')">Annuleer</button>'+ 
          '<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveCatEdit();deleteElement(\'editModal\')">Opslaan</button></div>'+ 
         '</div>'+ 
        '</div>'+ 
       '</div>'; 
      } 
     } 
     window.setTimeout(function() { 
      main.appendChild(modal); 
      $('#editModal').modal('show') 
     }, 100); 
     object = null; 
     var obj = null; 

你可以看到，有一個被稱爲「afbeelding kiezen」按鈕，具有的ID 「update-cat-img」觸發功能updateList()該功能點擊文件輸入。問題在於檢測到更改事件，因爲表單是在整個頁面加載後追加的，所以我無法添加addEventListener，正在偵聽要更改的文件輸入值。

這是我所嘗試過的，但是當然，它不起作用。 當file的值改變時，我將如何能夠將fileView的值更改爲file的值？

function updateList() { 
    var file = document.getElementById('cat-path-update'); 
    var fileView = document.getElementById('cat-path-show'); 
    file.click(); 
    file.addEventListener('change', function() { 
     m(); 
     fileView.value = file.value; 
    }, false); 
    m(file.value); 

} 

Answer 1

務必在通話前添加更改事件。 下面是一個例子：

//HTML-Template 
var tHTML = (function(){/* 
    <div> 
     <div><span id = 'sName'>-</span></div> 
     <div><input id = 'inFile' name = 'inFile' type = 'file' /></div> 
    </div> 
*/}).toString().split('/*').pop().split('*/')[0].trim(); 

//Append HTML 
document.body.innerHTML += tHTML; 

//Add change event 
var tF = document.querySelector('#inFile'); 
tF.onchange = function(){ 
    if(this.files && this.files.length){ 
     var tS = document.querySelector('#sName'); 
     tS.textContent = this.files[0].name 
    } 
}; 

//Execute 
tF.click();