文件不存在'；不要总是使用PHP&；上传到服务器；Javascript

我有一个页面，我使用它让用户按下提交按钮来插入MYSQL数据，还可以捕获图像并将.png文件上传到目录，只需单击一个提交按钮。9/10这很好用。我不确定这是连接问题（在无线设备上进行）还是我的代码。它将插入MYSQL数据，但不会将图像上载到服务器。下面是我的上传代码，来自我的文件和代码调用的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.';
?>

函数uploadEx（）{
var canvas=document.getElementById（“canvasSignature”）；
var dataURL=canvas.toDataURL（“image/png”）；
document.getElementById（'hidden_data'）。value=dataURL；
var fd=新表单数据（document.forms[“form”]）；
var xhr=new XMLHttpRequest（）；
xhr.open（'POST'，'/inc/img/inspection/upload_data.php'，true）；
xhr.upload.onprogress=函数（e）{
if（如长度可计算）{
var percentComplete=（e.loaded/e.total）*100；
console.log（完成百分比+'%uploaded'）；
//警报（“成功上传”）；
}
};
xhr.onload=函数（）{
};
xhr.send（fd）；
};
下面是UPLOAD_DATA.PHP

根据您的评论，您没有取消默认提交事件，这将导致表单提交。这可能会导致ajax请求不总是完成

如果您像您一样使用内联javascript（我会尝试将所有内联js移动到脚本本身…），您需要确保使用以下内容：

onsubmit="return uploadEx();"

及

在您的

uploadEx（）

函数中，您以以下内容结束：

function uploadEx() {
  // your code

  return false;
}

---

您是否正在取消默认表单提交事件？当页面重新加载时，您的请求可能没有完成处理。我甚至没有意识到我的表单标记中有一个onsubmit=“uploadEx（）；和一个onclick=“uploadEx（）；我的提交按钮。也许这就是罪魁祸首。在我排除这个可能性之前，我必须做一些测试。我一定会测试这个。我需要用onsubmit和onlick调用我的函数吗？@magowan90如果你的按钮提交表单，你只需要检查

onsubmit

。这就是我想要确保的。谢谢。我加了假报税表；并更改了onsubmit和onclick选项。这并没有解决它。我提交了大约60次。在60人中，有2人失败了。而且，如果我的onclick和onsubmit中没有返回true，它似乎根本不会运行。

function uploadEx() {
  // your code

  return false;
}