Question

当我尝试显示多个图像时，我遇到了一些问题（好吧，它不能用于一个图像，所以多个不可能），而我正在做的是使用我的AJAX功能从我的数据库恢复，所有图像位置字符串在表格图像中。然后它调用另一个名为 setImages（）的函数，它接收图像位置的那些字符串，我在字符串上使用迭代（使用jQuery的 .each（））来触发AJAX请求调用名为image.php?img=[data]的php脚本。 data 是包含图像位置的字符串，所以我有类似下面的代码：

问题是我的js setImages()没有显示图片

PHP文件：

<?php

    $init="/var/Imagenes/cursos/";
    $img=$_GET['img'];
    $path=$init.$img;
    echo $path;
//el path debe ser autores/ or cursos/
    $name="azure";
/*
    header("Cache-Control: no-cache, must-revalidate");
    header("X-Sendfile: $path");
    header("Content-Type: image/jpeg");
    header("Content-Disposition: inline; filename='archivos'");
*/
//el nombre de la base de datos de la imagen
header("Cache-Control: no-cache, must-revalidate");
if((isset($path)&& !is_null($path))){
    header("X-Sendfile: $path");
    if(strpos( $img, ".png" )||strpos( $img, ".PNG" )){
        header("Content-Type: image/PNG;base64");
    }
    elseif(strpos( $img, ".jpg" )||strpos( $img, ".JPG" )){
        header("Content-Type: image/jpg;base64");
    }
    elseif(strpos( $img, ".jpeg" )||strpos( $img, ".JPEG" )){
        header("Content-Type: image/jpeg;base64");
    }
    else{
        return "error.jpg";
    }
    $newimg=rand(1000 , 9999 );
    header("Content-Disposition: inline; fileimg= $newimg-$img");
    exit();
}
else{
    echo "no se pudo realizar la consulta";}

JS代码：

函数 listImgCursos 工作正常......

function listImgCursos(identificador) {
           var resultado= $.ajax({
                url: consultaBasica,
                cache: false,
                type: 'POST',
                data : { action: "imgCursos"}
            }).then(
                function(data){// Success
                    var flagErrFound = false;
                    var nf404 = "" ;
                        $.each(data,
                            function(index,datos){
                                if((datos['id']===null)||(datos['img']=="")||(datos['img']==null)){
                                    nf404 = datos['id'];
                                    flagErrFound= true;
                                }//if close
                            }//function close
                        )//each close
                        if(flagErrFound===true){
                            error = {error: "CX02", msj: "Failed to get data from records.", data: nf404 };
                            return $.Deferred().reject(error);
                            }
                        else
                            return data;
                    },//function sucessful
                function(){// fail
                    error = {error: "CX01", msj: "Failed to execute ajax"};
                    return $.Deferred().reject(error);
                    }//function fail
                );//then;  
            resultado.done(
                function (data){//success
                   setImages(data);
                }//function DONE
            );
            resultado.fail(
                function(e){//function fail
                    console.log(e.msj + " "+ e.error + ":" + e.data );
                }//function FAIL)
            );  
    }
    function setImages(data){


        $.each(data, function (index, datos) {
            var temp="../classes/imagen.php?img="+encodeURIComponent(datos['img'])+"&t="+((new Date).getTime());
            console.log(temp); // returns something like: ../classes/imagen.php?img=curso-2561.jpg&t=1489074434134
            $.ajax({
                url: temp,
                type: "GET",
                dataType: "image/jpg;base64",
                async:true,
              cache: false,
              success: function(datai){
                console.log(datai);
                    $('#pickimg').append('<img src="data:image/png;base64,' + datai + '" />');
              },
              fail: function(){

              }
            });
        });

Answer 1

问题是我的js的setImages（）没有显示图像

这是由于多种原因：

PHP代码实际上并没有返回文件内容。为此，请使用file_get_contents()之类的函数， readfile()等。此外，字符串应为base-64编码，因此请使用base64_encode()。
```
$newimg=rand(1000 , 9999 );
header("Content-Disposition: inline; fileimg= $newimg-$img");
echo base64_encode(file_get_contents($path));
exit();
```
第一个项目符号可能是多余的，但标题Content-Disposition的语法只包含三个指令： name ， filename 和文件名* ¹。因此 fileimg 指令无效。那个标题可以包含 filename 指令但是因为返回一个字符串就没用了：
```
header("Content-Disposition: inline; filename=\"$newimg-$img\"");
```
从这个意义上讲，它并没有真正返回图像，因此 Content-Type 的标题基本上是不正确的。因此，AJAX调用（使用$.ajax()）不应指定dataType（即dataType: "image/jpg;base64"，对于jpgs，png等，它不会是动态的 - {j}。因此，请删除 dataType 选项。

通过this phpFiddle中应用的修改，查看对此的证明。单击标记为运行 - F9 的按钮 - 然后在框架加载时，单击标有更新的按钮以触发对PHP脚本的AJAX调用，该脚本将加载PNG图像和将其附加到具有id属性＆＃34; pickimg ＆＃34;的元素。

¹ <子> https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#Directives

通过PHP返回图像并使用AJAX设置为src

PHP文件：

JS代码：

1 个答案: