javascript - 为什么我的 javascript 无法使用此代码上传图像并将其放入 Canvas 元素中？

Question

function addMoreFileUploads(id){
    var canvasName =  'canvas' + id;
    var canvas = document.getElementById(canvasName);



    $("#fileUploads").append('<input id="' + id + '" type="file" name="files[]" /> <br><br>');

    $("#canvasInsert").append('<canvas id="'+ canvasName +'" style="border:1px solid #000000;" width="500" height="500"></canvas>');

    var imageLoader = document.getElementById(id); //OnChange="upl()" 

    imageLoader.addEventListener('change',
        function(e){
            var reader = new FileReader();
            reader.onload = function(event){
                var img = new Image();
                img.onload = function(){
                    //canvas.width = img.width;
                    //canvas.height = img.height;
                    //ctx.drawImage(img,0,0);
                }
                img.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);   
        },false);
}

尝试做到这一点，以便当我添加输入元素时，它还会附加一个事件监听器来查找图像，然后将其读入已创建的 Canvas 元素中。

想法??

Answer 1

var canvas = document.getElementById(canvasName);

将为 null，因为此时在您的 DOM 中没有 canvas 元素

function addMoreFileUploads(id){

    var canvasName =  'canvas' + id;

    $("#fileUploads").append('<input id="' + id + '" type="file" name="files[]" /> <br><br>');
    $("#canvasInsert").append('<canvas id="'+ canvasName +'" style="border:1px solid #000000;" width="500" height="500"></canvas>');

    var canvas = document.getElementById(canvasName),
        ctx = canvas.getContext("2d");

    var imageLoader = document.getElementById(id); //OnChange="upl()" 

    imageLoader.addEventListener('change',
        function(e){
            var reader = new FileReader();
            reader.onload = function(event){
                var img = new Image();
                img.onload = function(){
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img,0,0);
                }
                img.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);   
        },false);
}

addMoreFileUploads('foo');

还有更多错误。这是一个有效的代码，但在我看来，即使它有效，也相当困惑。

演示: http://jsfiddle.net/LqjLD/1/