Question

我正在尝试调整上传图像的大小，然后上传新图像。我的代码运行没有错误，并且可以看到成功调整了图像的大小，但是以某种方式上传了原始图像，而不是新创建的图像。

我猜e.target.files [0] = newimg;将上传的图像文件更改为新图像文件的正确方法不是正确的方法。正确的方法应该是什么？

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">

            function ResizeImg(e)
            {
                const file = e.target.files[0];
                const fileName = file.name;
                const reader = new FileReader();
                reader.readAsDataURL(e.target.files[0]);
                reader.onload = event => 
                {
                    const img = new Image();
                    img.src = event.target.result;
                    img.onload = () => 
                    {
                        const elem = document.createElement('canvas');
                        const ctx = elem.getContext('2d');

                        const maxWidth = 50;
                        const maxHeight = 50;

                        const ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
                        const width = img.width * ratio + .5 | 0;
                        const height = img.height * ratio + .5 | 0;

                        elem.width = width;
                        elem.height = height;

                        ctx.drawImage(img, 0, 0, width, height);
                        ctx.canvas.toBlob((blob) => 
                        {
                            const newimg = new File([blob], fileName, file);
                            e.target.files[0] = newimg;
                        });
                    }
                };
            }

    </script>
    </head>

  <body>
        <form action="upload.php" method="post" enctype="multipart/form-data">
            <input name="infile" type="file" onchange="ResizeImg(this)">
            <br><br><input type="submit" name="submit">
        </form> 
  </body>   

</html>

Answer 1

从技术上讲，您正在这样做，输入中的BUT文件是只读。因此，浏览器将不允许您更改这些文件。您可以做的是创建新的表单数据，并在其中添加所有新图像，然后使用提取将其上传并发送以异步发送而不刷新页面。

Answer 2

在enter link description here找到了答案。可以使用fileInput.files = fileList

更改文件输入的文件列表

选择文件时，Javascript调整图像大小并上传新图像而不是原始图像

2 个答案: