问调整图像大小并附加到HTML表单的正确方法？

EN

<form method="post" action="abc.php">
    <input id="image-1" type="file" name="image-1" onchange="resizeImage('image-1')">
    <input id="image-2" type="file" name="image-2" onchange="resizeImage('image-2')">
    <input type="submit" value="Submit">
</form>

function resizeImage(inputID) {
    //Read in file
    var file = event.target.files[0];

    //Ensure it's an image
    if (file.type.match(/image.*/)) {
        // Load the image
        var reader = new FileReader();
        reader.onload = function (readerEvent) {
            var image = new Image();
            image.onload = function (imageEvent) {

                // Resize the image
                var canvas = document.createElement('canvas'),
                    max_size = 1200,
                    width = image.width,
                    height = image.height;
                if (width > height) {
                    if (width > max_size) {
                        height *= max_size / width;
                        width = max_size;
                    }
                } else {
                    if (height > max_size) {
                        width *= max_size / height;
                        height = max_size;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(image, 0, 0, width, height);

                document.getElementById(inputID).src = canvas.toDataURL('image/png');
            };
            image.src = readerEvent.target.result;
        };
        reader.readAsDataURL(file);
    }
}