Question

我为图片创建了单上传，并将图片放到了画布上，这里是demo。现在我想为多个上传图像修改我的脚本，这是我的修改脚本：

JS ：

$(function() {
    $('#file-input').on('change',function(e) {
        if (!e.target.files.length || !window.FileReader) {
            return;
        } else {
            var countedfiles = $('#thumbnails canvas[data-other="fileCanvas"]').length; // check lenght of file canvas
            for (var i = 0; i < e.target.files.length; i++) {
                if (countedfiles > 0){
                 var numb = countedfiles + 1;
                } else {
                 var numb = i;
                }
                var file = e.target.files[i], imageType = /image.*/;
                 if (!file.type.match(imageType))
                 return;

                var reader = new FileReader();
                reader.onload = fileOnload(numb);
                reader.readAsDataURL(file);
            }
        }

    });

    function fileOnload(numb,e) {
        var $img = $('<img>', { src: e.target.result }); // this line is error
        var newCanvas = '<canvas class="canvas" width="120px" height="120px" data-other="fileCanvas" id="canvas-'+numb+'"></canvas>';
        $('#thumbnails').append(newCanvas);
        var canvas =  $('#canvas-'+numb)[0];

        var context = canvas.getContext('2d');

        $img.load(function() {
            var maxWidth = 120; // Max width for the image
            var maxHeight = 120;    // Max height for the image
            var ratio = 0;  // Used for aspect ratio
            var width = this.width;    // Current image width
            var height = this.height;  // Current image height


            // Check if the current width is larger than the max
            if(width > maxWidth){
                ratio = maxWidth / width;   // get ratio for scaling image
                this.width = maxWidth; // Set new width
                this.height = height * ratio; // Scale height based on ratio
                height = height * ratio;    // Reset height to match scaled image
            }

            var width = this.width;    // Current image width
            var height = this.height;  // Current image height

            // Check if current height is larger than max
            if(height > maxHeight){
                ratio = maxHeight / height; // get ratio for scaling image
                this.height = maxHeight; // Set new height
                this.width = width * ratio; // Scale width based on ratio
                width = width * ratio;    // Reset width to match scaled image
            }
            var newWidth = this.width;
            var newHeight = this.height;
            context.drawImage(this, 0, 0, newWidth, newHeight);
        });

    }
});

HTML

<input type="file" id="file-input" multiple>
<div id="thumbnails"> </div>

但是我在控制台上遇到了这个错误：

Uncaught TypeError: Cannot read property 'target' of undefined

jsfiddle

Answer 1

您的问题似乎没有传递函数参数。

应该是：

reader.onload = fileOnload(numb,e);

代替，

reader.onload = fileOnload(numb);

所以，你的代码将是：

$(function() {
    $('#file-input').on('change',function(e) {
        console.log(e.target.files[0]);
        if (!e.target.files.length || !window.FileReader) {
            return false;
        } else {
            var countedfiles = $('#thumbnails canvas[data-other="fileCanvas"]').length; // check lenght of file canvas
            for (var i = 0; i < e.target.files.length; i++) {
                if (countedfiles > 0){
                 var numb = countedfiles + 1;
                } else {
                 var numb = i;
                }
                console.log(e.target.files[i]);
                var file = e.target.files[i];

                var reader = new FileReader();
                reader.onload = fileOnload(numb,e);
                reader.readAsDataURL(file);
            }
        }

    });

    function fileOnload(numb,e) {
        var $img = $('<img>', { src: e.target.result });
        var newCanvas = '<canvas class="canvas" width="120px" height="120px" data-other="fileCanvas" id="canvas-'+numb+'"></canvas>';
        $('#thumbnails').append(newCanvas);
        var canvas =  $('#canvas-'+numb)[0];

        var context = canvas.getContext('2d');

        $img.load(function() {
            var maxWidth = 120; // Max width for the image
            var maxHeight = 120;    // Max height for the image
            var ratio = 0;  // Used for aspect ratio
            var width = this.width;    // Current image width
            var height = this.height;  // Current image height


            // Check if the current width is larger than the max
            if(width > maxWidth){
                ratio = maxWidth / width;   // get ratio for scaling image
                this.width = maxWidth; // Set new width
                this.height = height * ratio; // Scale height based on ratio
                height = height * ratio;    // Reset height to match scaled image
            }

            var width = this.width;    // Current image width
            var height = this.height;  // Current image height

            // Check if current height is larger than max
            if(height > maxHeight){
                ratio = maxHeight / height; // get ratio for scaling image
                this.height = maxHeight; // Set new height
                this.width = width * ratio; // Scale width based on ratio
                width = width * ratio;    // Reset width to match scaled image
            }
            var newWidth = this.width;
            var newHeight = this.height;
            context.drawImage(this, 0, 0, newWidth, newHeight);
        });

    }
});

<强> JSFiddle Demo

Jquery多个图像上传并将图像放到画布元素

1 个答案: