Question

我正在尝试使用 jquery 从数据库中检索多个/单个图像。按照我尝试的方式，我只收到第一张图片。其余的不可见。

为了保存多个图像，我使用逗号分隔。 EX：保存了2张图片，分别命名为x.jpg和y.jpg，图片名称将在列中保存为x.jpg,y.jpg，图片将上传到文件夹中。

var image_DB = data[0].pimage; //FROM DB COLUMN
var upload_dir = "../uploads/"; //IMAGE PATH
var img = document.createElement("IMG");
img.height = 90;
img.weight = 90;
                    
if(image_DB !== ''){ //IF IMAGE COLUMN HAS A VALUE || IMAGE
   if(image_DB.includes(',') !== false){ //IF THE COLUMN CONTAINTS MULTIPLE IMAGES
      console.log('Multiple Images Here');
      var image = image_DB.split(',');//SPLITTING IT WITH COMMA -1
      $.each(image, function(key, value){ //ITERATING VALUES TO FIND FILE NAME
           img.src = upload_dir+value; //UPDATING IMAGE SOURCE
      });
    }else{//IF THE COLUMN CONTAINTS ONE IMAGE WITHOUT COMMA
       console.log('Single Image Here');
       img.src = upload_dir+image_DB;
    }
}else{ //IF NO IMAGE EXISTS
   console.log('Nothing is in DB');
}
$('#preview').prepend(img);

我哪里出错了？请提出建议。

它在 PHP 中的实现方式是

if($row['pimage'] !== ''){
   if(strpos($upload_dir.$row['pimage'],',')!== false){
        $image = explode(',',$row['pimage']);
        $imageArr = '';
        foreach ($image as $im){
           $imageArr .= '<img src="'.$upload_dir.$im .'"width="150" height="150"/>';
        }
   }
   else{
       $imageArr = '<img src="'.$upload_dir.$row['pimage'].'"width="150" height="150"/>';
   } 
}else{
   $noImage = 'No Image.jpg';
   $imageArr = '<img src="'.$upload_dir.$noImage.'"width="150" height="150"/>';
}

Answer 1

您只有一个 img 对象并且您为其分配了多张图片，因此只会显示一张

var image_DB = data[0].pimage; //FROM DB COLUMN
var upload_dir = "../uploads/"; //IMAGE PATH
                    
if(image_DB !== ''){ //IF IMAGE COLUMN HAS A VALUE || IMAGE
   if(image_DB.includes(',') !== false){ //IF THE COLUMN CONTAINTS MULTIPLE IMAGES
      console.log('Multiple Images Here');
      var image = image_DB.split(',');//SPLITTING IT WITH COMMA -1
      $.each(image, function(key, value){ //ITERATING VALUES TO FIND FILE NAME
           var img = document.createElement("IMG");
           img.height = 90;
           img.weight = 90;
           img.src = upload_dir+value; //UPDATING IMAGE SOURCE
           $('#preview').prepend(img);
      });
    }else{//IF THE COLUMN CONTAINTS ONE IMAGE WITHOUT COMMA
       console.log('Single Image Here');
       var img = document.createElement("IMG");
       img.height = 90;
       img.weight = 90;
       img.src = upload_dir+image_DB;
       $('#preview').prepend(img);
    }
}else{ //IF NO IMAGE EXISTS
   console.log('Nothing is in DB');
}

此处添加了多个图像的示例。

使用 jquery 检索多个图像

1 个答案: