javascript - 文件并不总是使用 PHP 和 Javascript 上传到服务器

Question

我有一个页面，我用它让用户按下提交按钮以插入 MYSQL 数据，但也捕获图像并将 .png 文件上传到目录，所有这些都通过单击一个提交按钮完成。 9/10 这非常有效。我不确定这是连接问题(它是在无线设备上完成的)还是我的代码。它会插入 MYSQL 数据的 1/10 倍，但不会将图像上传到服务器。下面是我的文件中的上传代码和代码调用的 upload_data.php 文件。抱歉，我在这个网站上的格式不是最好的。

 <script>
        function uploadEx() {
            var canvas = document.getElementById("canvasSignature");
            var dataURL = canvas.toDataURL("image/png");
            document.getElementById('hidden_data').value = dataURL;
            var fd = new FormData(document.forms["form"]);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/inc/img/inspection/upload_data.php', true);

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete + '% uploaded');
                  //alert('Succesfully uploaded');
                }
            };

            xhr.onload = function() {

            };
            xhr.send(fd);
        };
    </script>


BELOW IS UPLOAD_DATA.PHP
<?php
$upload_dir = "upload/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$id = $_POST['sub_id'];
$file = $upload_dir . $id . ".png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

Answer 1

根据您的评论，您没有取消默认的提交事件，这会导致提交表单。这可能会导致 ajax 请求无法始终完成。

如果你像你一样使用内联 javascript(我会尝试将所有内联 js 移动到脚本本身......)，你需要确保你使用类似的东西:

onsubmit="return uploadEx();"

和

onclick="return uploadEx();"

在您的 uploadEx() 函数中，您以:

function uploadEx() {
  // your code

  return false;
}