JavaScript检测附加文件输入的更改

时间:2016-11-22 12:02:13

标签: javascript html

当用户使用以下代码按下按钮时,我生成了一个表单:

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;

正如您所看到的,有一个名为&#34;的按钮,名为kiezen&#34;,ID为&#34; update-cat-img&#34;触发函数updateList()此函数单击文件输入。问题是检测到更改事件,因为在加载整个页面后附加了表单,我无法添加addEventListener,侦听要更改的文件输入值。

这是我尝试过的,但当然,它并不起作用。 当fileView的值发生变化时,我如何能够将file的值更改为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);

}

1 个答案:

答案 0 :(得分:1)

请务必在通话前添加更改事件。 这是一个例子:

let CheckRow (expectedValue : int) (rowIndex : int) =
    [0..8] |> List.forall (fun colIndex ->
        sudoku.[rowIndex, colIndex] <> expectedValue)