Question

我正在建立一个允许用户上传图片的网站，然后以用户友好的方式显示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文件，它也会显示“图像已上传” ...因此，基本上。它没有测试任何atm ...

我也对我的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";
    }
 }
 }

?>

先谢谢了。

你们真棒，已经为我在该项目的开发中提供了至关重要的帮助！

Answer 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，以便将响应返回到前端，然后可以警告响应

我想您应该从前端（HTML）确保只能选择带有所需扩展名的图像，我认为这会使您的验证更加容易。您可以通过在输入元素（即用于选择图片的元素）上附加accept属性来应用此方法。

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

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

如果您想使用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"); }
        }
    }

使用Ajax验证提交

1 个答案: