Question

所以我在提交表单之前尝试调整客户端图片的大小，然后将其附加到表单中。

目前我有这个：

<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>

动态添加和删除图像 - 因此可能根本没有或20个。

我把它放在一起（调整图像大小并且似乎正常工作）：

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

当我提交此内容时 - 最初它似乎正常工作。但在服务器端验证时，即使从3000x3000px裁剪为1200x1200px，图像也与原始图像大小相同。几乎就好像它还在上传原文。

在添加此新调整大小的图像之前，是否需要删除源？我现在正确地做到了吗？我需要重现正常的图像选择，因为我无法控制服务器端处理。希望这是可能的！

Answer 1

我在解决同样的问题时才注意到这篇文章。替换用户所选类型＆＃39;文件＆＃39;的输入是不可能的。用一个调整大小的。出于安全考虑，浏览器不允许这样做。表单使用HTTP POST发布，这是同步的。根据一些文章，改变的图像应该异步发布。所有示例都使用XHR或Ajax。可能的解决方案似乎是这样的： 1）调整图像大小并将画布转换为dataUrl或blob; 2）在表单中添加新的隐藏字段或在表单外移动图像上传; 3）使用XHR或Ajax发布已调整大小的图像; 4）从＆＃39;文件＆＃39;的原始输入中删除名称属性。 type（这将阻止其提交）或忽略服务器端; 5）在服务器上解码dataUrl并将图像保存在上传文件夹中。

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

1 个答案: