有沒有辦法從一個文件夾中只使用Javascript返回所有圖像文件名的列表？

我想要顯示位於服務器中的圖像庫中的文件夾中的所有圖像。有沒有辦法從一個文件夾中只使用Javascript返回所有圖像文件名的列表？

有沒有一種方法可以僅使用JavaScript或JQuery從文件夾中返回所有圖像文件名的列表？

此外，我只想使用JavaScript計算類似文件夾中的圖像文件數量。

是否有任何方法來統計僅使用JavaScript的文件夾中的圖像文件數量？

2011-08-09 Pooja

http://stackoverflow.com/questions/860743/jquery-pull-images-from-directory..similar post，試試這個也是這樣的：http://stackoverflow.com/questions/3087502/foreach-file -in-directory-jquery – abhijit

編號JavaScript是客戶端技術，無法在服務器上執行任何操作。但是，您可以使用AJAX調用可能返回所需信息的服務器端腳本（例如PHP）。

如果你想使用AJAX，最簡單的方法將是使用jQuery的：

$.post("someScript.php", function(data) { 
    console.log(data); //"data" contains whatever someScript.php returned 
});

來源

2011-08-09 09:47:33

我該如何使用AJAX。你能幫我麼？ – Pooja

不，你不能獨自做到這一點使用Javascript。客戶端Javascript無法以我想的方式讀取目錄的內容。然而，如果你能夠添加一個索引頁面（或者配置你的web服務器來顯示索引頁面）images目錄，並且你正在從同一服務器提供Javascript，那麼你可以創建一個AJAX調用來獲取索引，然後解析它。

即

1）啓用了Apache對yoursite.com相關的目錄的索引：

http://www.cyberciti.biz/faq/enabling-apache-file-directory-indexing/

2）然後取出/與jQuery解析它。你必須找出如何最好地刮的頁面，幾乎可以肯定有獲取整個列表的更有效的方式，但一個例子：

$.ajax({ 
    url: "http://yoursite.com/images/", 
    success: function(data){ 
    $(data).find("td > a").each(function(){ 
     // will loop through 
     alert("Found a file: " + $(this).attr("href")); 
    }); 
    } 
});

來源

2011-08-09 10:04:23 Euan

這將列出你下定義的文件夾中的所有jpg文件url：並將它們作爲段落追加到div。可以用ul li來做到這一點。

$.ajax({ 
    url: "YOUR FOLDER", 
    success: function(data){ 
    $(data).find("a:contains(.jpg)").each(function(){ 
     // will loop through 
     var images = $(this).attr("href"); 

     $('<p></p>').html(images).appendTo('a div of your choice') 

    }); 
    } 
});

來源

2012-06-26 18:35:19

我在這裏得到一個403錯誤，任何解決方法？ –

使您的目錄可瀏覽： '選項+索引' –

某些具有特殊字符的文件名將不會被選中。 eg filename =「blk100A＃01-01」< - 不會選擇但文件名=「blk100＃01-01」< - 將被選中（'＃'之前沒有'A'）任何人都可以幫忙？ –

雖然可以運行FTP命令，使用的WebSockets，更簡單的解決方案是列出在服務器端（PHP）使用opendir您的文件，「隨地吐痰」入HTML源代碼，所以這將是可用到客戶端。

下面的代碼將做到這一點，

可選 -

使用<a>標籤呈現的鏈接。
查詢使用服務器端（PHP）的更多信息，

例如文件大小，

_{PHP文件大小提示：你也可以很容易地克服PHP的文件大小爲2GB限制使用：AJAX + HEAD請求+ .htaccess規則允許Content-Length ac停止從客戶端。}

一個完全工作的例子可以在這裏找到我的github repository: download.eladkarako.com
以下是簡裝（簡體）例如：

<?php 
    /* taken from: https://github.com/eladkarako/download.eladkarako.com */ 

    $path = 'resources'; 
    $files = []; 
    $handle = @opendir('./' . $path . '/'); 

    while ($file = @readdir($handle)) 
    ("." !== $file && ".." !== $file) && array_push($files, $file); 
    @closedir($handle); 
    sort($files); //uksort($files, "strnatcasecmp"); 

    $files = json_encode($files); 

    unset($handle,$ext,$file,$path); 
?> 
<!DOCTYPE html> 
<html lang="en-US" dir="ltr"> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <div data-container></div> 
    <script> 
    /* you will see (for example): 'var files = ["1.bat","1.exe","1.txt"];' if your folder containes those 1.bat 1.exe 1.txt files, it will be sorted too! :) */ 

    var files = <?php echo $files; ?>; 

    files = files.map(function(file){ 
     return '<a data-ext="##EXT##" download="##FILE##" href="http://download.eladkarako.com/resources/##FILE##">##FILE##</a>' 
     .replace(/##FILE##/g,  file) 
     .replace(/##EXT##/g,  file.split('.').slice(-1)) 
     ; 
    }).join("\n<br/>\n"); 

    document.querySelector('[data-container]').innerHTML = files; 
    </script> 

</body> 
</html>

DOM結果會像即：

<html lang="en-US" dir="ltr"><head> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <div data-container=""> 
    <a data-ext="bat" download="1.bat" href="http://download.eladkarako.com/resources/1.bat">1.bat</a> 
    <br/> 
    <a data-ext="exe" download="1.exe" href="http://download.eladkarako.com/resources/1.exe">1.exe</a> 
    <br/> 
    <a data-ext="txt" download="1.txt" href="http://download.eladkarako.com/resources/1.txt">1.txt</a> 
    <br/> 
    </div> 
    <script> 
    var files = ["1.bat","1.exe","1.txt"]; 

    files = files.map(function(file){ 
     return '<a data-ext="##EXT##" download="##FILE##" href="http://download.eladkarako.com/resources/##FILE##">##FILE##</a>' 
     .replace(/##FILE##/g,  file) 
     .replace(/##EXT##/g,  file.split('.').slice(-1)) 
     ; 
    }).join("\n<br/>\n"); 

    document.querySelector('[data-container').innerHTML = files; 
    </script> 


</body></html>

來源

2015-06-20 00:26:38

許多技巧都可行，但Ajax請求將文件名分割爲19個字符？看看Ajax請求的輸出看到：

的文件名是好的進入href屬性，但$(this).attr("href")使用的<a href='full/file/name' >分割文件名的文本</a>

所以$(data).find("a:contains(.jpg)")無法檢測到擴展名。

我希望這是有用的

來源

2015-09-05 22:07:54 megaten

恕我直言，Edizkan阿迪爾·阿塔的想法實際上是最合適的方式。它提取定位標記的URL並將其放入不同的標記中。如果你不想讓頁面訪問者看到錨，那麼他們全都用jQuery或display: none;在CSS中。你

還可以執行預取，這樣的：

<link rel="prefetch" href="imagefolder/clouds.jpg" />

這樣，你就不必隱藏它，仍然可以提取的圖像的路徑。

來源

2016-07-01 21:16:04 Thielicious

有沒有辦法從一個文件夾中只使用Javascript返回所有圖像文件名的列表？

回答

相關問題