Php 使用Ajax验证提交

我正在建立一个网站，允许用户上传图片，然后以用户友好的方式显示EXIF信息

我还想为用户提供一个在线共享图片的选项

目前，我已经有了用于图像预览的JavaScript完全工作：我在表单上选择了一个图像，它出现在网站上

现在，用户将图片加载到预览区域后，会出现一个按钮，允许用户上载图片

问题是，我想上传没有页面刷新完成

我已经问了一个问题，通过在我的主页头上使用这段代码解决了这个问题，其中的表单是：

//等待加载DOM $document.readyfunction{ //绑定“myForm”并提供一个简单的回调函数 $'form1'.ajaxFormfunction{ 图片上传！； }; }; 这确实有效。。。当我按下按钮上传图片时，它确实被上传了，它会停留在页面上，预览仍然可见，并且会显示一条警告消息，说图片上传了

问题是，如果我选择喜欢一个.txt文件并按以上载，它仍然会说图像上载，即使它没有上载，因为在PHP文件上，我在上载它之前验证文件类型，只允许.png和.jpg

它也会说图片上传，即使我修改我的PHP文件的目的与错误的信息。。。所以，基本上。它没有测试任何东西

我也有我的PHP代码，以显示一条消息，在这种情况下说，只有jpeg和png允许。。。。。。但这将显示在一个空白提交页面后，当然，我不想

问题是: 由于使用Ajax的代码有点覆盖了PHP代码中的错误消息，我如何修改它以显示错误消息，以防它不是试图上载的图像

另一种方法是，我可以在通过JavaScript将其放置到预览区域时验证它是否是图像

将图像加载到预览区域的我的JavaScript代码：

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#img1').attr('src', e.target.result);
            }

            //Mostrar a imagem e o mapa ao fazer o upload
            var x = document.getElementById("itens");
            if (window.getComputedStyle(x).display === "none") {
                x.style.display = "block";
            }
            var y = document.getElementById("exif");
            if (window.getComputedStyle(y).display === "none") {
                y.style.display = "block";  


            }
            y.scrollIntoView(true); //Redireciona o ecrã para a imagem carregada    

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });

        var botao = document.getElementById("upload_img");

        var z = document.getElementById("link_foto");

        botao.onclick = function() {
            if (window.getComputedStyle(z).display === "none") {
                z.style.display = "block";
            }
        }

将图像上载到文件夹和数据库的我的PHP代码：

---

为了解决您的问题：

您应该在ajax代码中添加success属性，这样只有在数据处理成功且没有错误时才会显示消息。您可以通过将代码替换为以下内容来应用此功能：

---

听起来有必要回顾一下AJAX工作原理的基础知识。这并不能直接回答你的问题，但它应该让你有足够的理解来自己找出答案：@cjc是的，我非常同意我应该。。。不是复习，而是实际学习。。。这很悲哀，但由于这个项目是建立在大量自学的基础上的，所以这条路充满了障碍。。问题是，我有一个完成它的日期，它越来越近。。。目前，我真的只需要完成这一部分，以及我需要在提交后从数据库中获取图像路径的部分。。。在这之后，就是关于改进和安全性的问题了，听起来您特别需要使用ajax成功：functiondata{}回调。从html的头部删除该警报。当ajax调用返回任何类型的数据时，它将作为变量数据传递给success回调。根据数据的内容，您可以选择触发警报，或执行其他操作。@GrantNoe如果我听起来很愚蠢，很抱歉，但我将如何以及在何处实现它？请查看：谢谢您的回答。我将尝试实现Ajax部分。关于输入接受。。。我知道它会起作用，但是有没有一种简单的方法可以通过JavaScript实现呢？我更愿意这样做，因为我需要对这个项目进行演示，使用这种前端验证并不总是看起来很好…好吧。。。我已经测试了您共享的AJAX代码，但它不起作用。它仍然显示上传的图像，无论它是真的上传还是notOk，我知道它为什么不工作，我会更新我的答案

<script> 
            // wait for the DOM to be loaded 
            $(document).ready(function() { 
                // bind 'myForm' and provide a simple callback function 
                $('#form1').ajaxForm({
                   success: function(response){ alert(response); }
                }); 
            }); 

</script> 

function readURL(input) {
        if (input.files && input.files[0]) {
            const fileType = input.files[0]['type'];
            const imageTypes = ['image/jpeg', 'image/jpg', 'image/png'];
            if(imageTypes.includes(fileType)) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#img1').attr('src', e.target.result);
            }

            //Mostrar a imagem e o mapa ao fazer o upload
            var x = document.getElementById("itens");
            if (window.getComputedStyle(x).display === "none") {
                x.style.display = "block";
            }
            var y = document.getElementById("exif");
            if (window.getComputedStyle(y).display === "none") {
                y.style.display = "block";  


            }
            y.scrollIntoView(true); //Redireciona o ecrã para a imagem carregada    

            reader.readAsDataURL(input.files[0]);
          } else { alert("Please select a valid image"); }
        }
    }