Javascript：如何在没有指定扩展名的情况下从文件夹检查图像是否存在？

Question

I am working in web application(bookshop) using php, Used Ajax to filter books, but updating image gave big issue from ajax, because i used id as image name, so i have only image name without extension, now i have to update image in book list, I have an image name but i do not know the extension of the image, but i have to check the image is exist or not from the folder without extension, if exist i have to get full image name with extension, else i have to go for default image.

Referred many answers but they used extension with url.

Sample Ajax code:

$.ajax({
        type: 'POST',
        dataType: 'json',
        url: '<?php echo base_url(); ?>bookShopC/filterbooks', 
        data: {bookname:bookname},
        success: function(data)
        {       
            $('#book_container_fil').html('');
            $.each(data, function(index,element){
                var book_name = element[0].book_id; // here i have book name without extension
                var full_file_name = checkFileExist(book_name); // tried with some functions but not works without ext.
                $('#book_container_fil').append("<div class='book_box'>
                <div class='book_img'>
                    // here i have to update if cover photo exist else print default photo
                    <img src='http://sample.com/assets/images/book-covers/default.png'>                 
                </div>
                <div class='book_data'><div></div>");
            });

        }
    });

Function to check if file exist:

function checkFileExist(book_name)
{   
    var picurl = 'http://sample.com/assets/images/cover_photo/'+book_name;
    var img = new Image();
    img.src = picurl;
    var re = img.height != 0;
    alert(re);
}

Answer 1

You could use something like this:

function checkFileExist(book_name)
{   

    var picurl = 'http://sample.com/assets/images/cover_photo/';
    var img1 = new Image(); 
    img1.src = picurl+picname+'.png';
    var img2 = new Image(); 
    img2.src = picurl+picname+'.jpg';
    var img3 = new Image(); 
    img3.src = picurl+picname+'.gif';
    if(img1.height != 0)
    {
       return picname+'.png';
    }
    else if(img2.height != 0)
    {
       return picname+'.jpg';
    }
    else if(img3.height != 0)
    {
       return picname+'.gif';
    }
    else
    {
       return 'default_cover.png';
    }
}

Answer 2

It's hard to validate a file path from a javascript. you could get image name via php. I believe you use codeigniter. so crete an another function near filterbooks call 'getFullFileName'

function getFullFileName(){

   $bookname = $_POST['bookname'];
   $result = glob ("./assets/images/book-covers/$bookname.*");

   if(isset($result[0]))
     echo $result[0];
   else
     echo "http://sample.com/assets/images/book-covers/default.png";


}

so in the ajax part:

 $.ajax({
  type: 'POST',
  dataType: 'json',
  url: '<?php echo base_url(); ?>bookShopC/filterbooks',
  data: {
    bookname: bookname
  },
  success: function(data) {
    $('#book_container_fil').html('');
    $.each(data, function(index, element) {

       var book_name = element[0].book_id;

      $.ajax({
        type: 'POST',
        url: '<?php echo base_url(); ?>bookShopC/getFullFileName',
        data: {
          bookname: book_name
        },
        success: function(imgurl) {

          $('#book_container_fil').append(imgurl);
        }
      });
    });
  }
});

If you give me the how look like 'data' json I can give you a better answer without using two ajax.