將 javascript 自動生成的文件附加到 POST 表單並在 $_FILES 中的 PHP 上處理它

Question

我正在嘗試將文件附加到表單並通過 POST 請求發送它。

問題是在js腳本中生成的文件（它在base64中裁剪圖像）接下來，我將它從base64轉換為blob。 並且不知道如何將這個 blob 鏈接到我的表單。

我可以通過ajax 來完成，但正在尋找將圖像作為文件發送而不使用 xhr/ajax 並在$_FILES中處理 PHP 端的方法。

甚至不知道有沒有可能

我的表單有attr 'multipart/form-data'

Answer 1

您可以創建一個隱藏的畫布，並在該畫布中使用 base64 編碼的字符串繪制圖像。 像下面這樣

<canvas style="height:200px;width:200px;display:none;" id="picture"></canvas>
<input type="hidden" name="clicked_image" id="clicked_image" />

然后是javascript代碼

<script type="text/javascript">
var videoPicture = 'your base64 string';
var hiddenPictureField = document.querySelector('input#clicked_image');
var canvasPicture = window.canvas = document.querySelector('canvas#picture');
canvasPicture.width = 480;
canvasPicture.height = 360;
canvasPicture.getContext('2d').
drawImage(videoPicture, 0, 0, canvasPicture.width, canvasPicture.height);
hiddenPictureField.value = canvasPicture.toDataURL("image/png");
</script>

然后您將在 clicked_image 字段中獲得圖像。 您可以相應地處理 base 64 字符串。