时间戳

首页 > 解决方案 > 使用 Ajax 验证提交

php - 使用 Ajax 验证提交

问题描述

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

我还想为用户提供一个选项，让他们能够在线分享他们的图片。

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

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

问题是我希望在不刷新页面的情况下完成上传......

我已经问过一个关于它的问题，并且已经通过在我的主页的“头部”上使用这段代码来解决它，表单是：

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

</script>

这确实有效......当我按下按钮上传它确实上传的图片时，它会停留在页面上，预览仍然可见，并显示一条警告消息说“图片已上传”..

问题是，如果我选择像“.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 代码将图像上传到文件夹和数据库：


<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);


$link = mysqli_connect("localhost","root","","geopic") or die("Error ".mysqli_error($link)); //ligação à base de dados e à tabela

 // O array global PHP $_FILES permite o upload de imagens do computador para o servidor.
 $image = $_FILES["imgInp"]["name"];

 //devolve o nome da cópia temporária do ficheiro presente no servidor 
 $uploadedfile = $_FILES['imgInp']['tmp_name'];

 //Devolve o tipo de ficheiro
 $image_type =$_FILES["imgInp"]["type"];

if($_SERVER["REQUEST_METHOD"] == "POST")
 {

     //imagecreatefrompng — Cria uma nova imagem a partir do ficheiro porque não se sabe se o utilizador vai fazer o upload de um ficheiro com extensão permitida 
 if($image_type=='image/png' || $image_type=='image/x-png')
 {
  $src = imagecreatefrompng($uploadedfile);
 }
 elseif($image_type=='image/gif')
 {
  $src = imagecreatefromgif($uploadedfile);
 }
 elseif($image_type=='image/jpeg' || $image_type=='image/jpg' || $image_type == 'image/pjpeg')
 {
  $src = imagecreatefromjpeg($uploadedfile);
 }else{
     //se não for uma imagem mostra a mensagem e termina o script
     exit ("Only jpeg and png allowed..." ) ; 
 }

 //getimagesize() Esta função vai "buscar" o tamanho da imagem carregada. O tamanho original é necessário para realizar o "resize" na função"imagecopyresampled".
 list($origWidth,$origHeight)=getimagesize($uploadedfile);

    $maxWidth = 1280; //Define a largura máxima da imagem a guardar no servidor
    $maxHeight = 800; //Define a altura máxima da imagem a guardar no servidor

 if ($maxWidth == 0)
    {
        $maxWidth  = $origWidth;
    }

    if ($maxHeight == 0)
    {
        $maxHeight = $origHeight;
    }

    // Calcula a rácio dos tamanhos máximos desejados e originais
    $widthRatio = $maxWidth / $origWidth;
    $heightRatio = $maxHeight / $origHeight;

    // Rácio usada para calcular novas dimensões da imagem
    $ratio = min($widthRatio, $heightRatio);

    // Calcula as novas dimensões da imagem
    $new_width  = (int)$origWidth  * $ratio;
    $new_height = (int)$origHeight * $ratio;    


 // Função que serve para a imagem não perder qualidade perante o redimensionamento
    $image_p=imagecreatetruecolor($new_width,$new_height);

 // No caso da imagem ser PNG com fundo transparente, esta função mantém a transparência
    imagealphablending($image_p, false);
    imagesavealpha($image_p, true);
 //Função que vai redimensionar a imagem
    imagecopyresampled($image_p,$src,0,0,0,0,$new_width,$new_height,$origWidth,$origHeight);

 //Vai gerar um nome para a foto com base na hora atual, para nunca existirem fotos com o mesmo nome

 $temp = explode(".", $image);
 $newfilename = round(microtime(true)) . '.' . end($temp);

 $filepath = "http://localhost/geoPic/photos/".$newfilename;

// A função move_uploaded_file vai realizar o carregamento da foto para a pasta.  
 if(move_uploaded_file($_FILES["imgInp"]["tmp_name"], "photos/".$newfilename))
 {
     /*
     $stmt = $link->prepare("INSERT INTO photo (name, path) VALUES (:name, :path)");
     $stmt->bindParam(':name', $nome);
     $stmt->bindParam(':path', $caminho);

// insert one row
     $nome = $newfilename;
     $caminho = $filepath;
     $stmt->execute();

     */

    $query_image = "insert into photo (name, path) values ('".$newfilename."', '".$filepath."')";

    if(mysqli_query($link, $query_image)){
        //$link_foto = mysqli_query($link,"SELECT path FROM carro WHERE name = $newfilename");

        echo "Image uploaded";

    }else{
        echo "image not uploaded";
    }
 }
 }

?>

提前致谢..

你们太棒了，已经在这个项目的开发中为我提供了重要的帮助！

标签： phpjqueryhtmlajax

解决方案

为了解决您的问题：

  1. 您应该在 ajax 代码中添加success属性，以便只有在数据处理成功且没有错误时才会显示消息。您可以通过用以下代码替换您的代码来应用它：
<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>

所以在添加了上面的脚本之后，你需要修改你的后端为return一个响应。所以在你的PHP代码中，你应该修改你的代码并替换echo为return这样响应将返回到前端，然后你可以提醒响应

  1. 我认为您应该从前端（HTML）确保只能选择带有您想要的扩展名的图像，我认为这将使您的验证更加容易。您可以通过将accept属性附加到输入元素（即您用于选择图像的元素）来应用此功能。

例子：<input accept="image/jpeg,image/jpg,image/png">

上面的代码将确保用户只能选择/上传具有以下扩展名（jpg、jpeg 和 png）的文件。

  1. 如果你想使用 JavaScript 来验证选择的文件是否是图像，那么我认为你应该readURL用这个替换你的函数：
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"); }
        }
    }

推荐阅读