如何使用表格 append 或设置和发布数据到 PHP

Question

希望有人可以提供帮助。 我有一个表格，可以上传手机相机拍摄的三张图像。 所以当然是一个非常重的图像（从 5 到 10 mb）。 我设法使用 javascript 调整图像服务器端的大小，以降低带宽和服务器端处理，但主要是带宽，因为它是针对移动用户的。

现在，我有一个新生成的图像的新 blob。 我什至可以在我的网页中通过 javascript 显示它，但我无法将它发布到我的 php 接收页面。

I have tried with the append and the set function via javascript and when I display the values in the same page, all the new files are in fact created, but when I post the form, PHP (different URL) is not getting the appended fields ，只有原始字段。 有什么线索吗？

希望有人可以提供帮助。 这是我的代码示例：

<form enctype="multipart/form-data" action="testpost.php" method="post" name="update" id="update" autocomplete="off" />

<p><input type="file" accept="image/*" name="foto1" id="foto1" style="display: none;" capture="environment" required></p>

<button type="submit" class="btn">Upload</button>

<script>
const MAX_WIDTH = 1520;
const MAX_HEIGHT = 1520;
const MIME_TYPE = "image/jpeg";
const QUALITY = 5;

const input = document.getElementById("foto1");
input.onchange = function (ev) {
  var image = document.getElementById('foto1');
  image.src = URL.createObjectURL(event.target.files[0]);

  const file = ev.target.files[0]; // get the file
  const blobURL = URL.createObjectURL(file);
  const img = new Image();
  img.src = blobURL;
  img.onerror = function () {
    URL.revokeObjectURL(this.src);
    // Handle the failure properly
    console.log("Cannot load image");
  };
  img.onload = function () {
    URL.revokeObjectURL(this.src);
    const [newWidth, newHeight] = calculateSize(img, MAX_WIDTH, MAX_HEIGHT);
    const canvas = document.createElement("canvas");
    canvas.width = newWidth;
    canvas.height = newHeight;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, newWidth, newHeight);
    canvas.toBlob(
      (blob) => {
        // Handle the compressed image. es. upload or save in local state
        //displayInfo("Original file", file);
        //displayInfo("Compressed file", blob);
        
      },
      MIME_TYPE,
      QUALITY
    );

    var fd = new FormData(update);
    fd.append("name", "test");
    fd.append("new_file", blob);
    
    // Display the values
    for (var pair of fd.entries()) {
    console.log( pair[0] + ' - ' + pair[1] );
    }

  };
};

function calculateSize(img, maxWidth, maxHeight) {
  let width = img.width;
  let height = img.height;

  // calculate the width and height, constraining the proportions
  if (width > height) {
    if (width > maxWidth) {
      height = Math.round((height * maxWidth) / width);
      width = maxWidth;
    }
  } else {
    if (height > maxHeight) {
      width = Math.round((width * maxHeight) / height);
      height = maxHeight;
    }
  }
  return [width, height];
}

// Función para convertir a Blob de forma
function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

// Utility functions for demo purpose

function displayInfo(label, file) {
  const p = document.createElement("p");
  p.innerText = `${label} - ${readableBytes(file.size)}`;
  document.getElementById("can_cross").append(p);
}

function readableBytes(bytes) {
  const i = Math.floor(Math.log(bytes) / Math.log(1024)),
    sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

  return (bytes / Math.pow(1024, i)).toFixed(2) + " " + sizes[i];
}

</script>