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();