2015-03-30 15 views
6

İstemci tarafında bir klasördeki tüm dosya adlarını almam gereken bir gereksinim var.Javascript - Bir klasördeki dosya adlarını geri alma

Bu nedenle, bir dosyadaki dosyaların adlarını Jquery kullanarak this answer adresine yönlendirmeye çalışıyorum. aşağıdaki gibi

<script> 
     var fileExt = ".xml"; 

     $(document).ready(
     function(){ 
      $.ajax({ 
      //This will retrieve the contents of the folder if the folder is configured as 'browsable' 
      url: 'xml/', 
      success: function (data) { 
       $("#fileNames").html('<ul>'); 
       //List all xml file names in the page 
       $(data).find('a:contains(" + fileExt + ")').each(function() { 
        var filename = this.href.replace(window.location, "").replace("http:///", ""); 
        $("#fileNames").append('<li>'+filename+'</li>'); 
       }); 
       $("#fileNames").append('</ul>'); 
      }  
      }); 
     }); 

    </script> 

HTML kodu:

<div id="fileNames"></div> 

Ama krom kodunu çalıştırdığınızda aşağıdaki hatayı alıyorum ve firefox şu şekildedir:

Benim kodudur

chrome: XMLHttpRequest cannot load file:///E:/Test/xml/. Received an invalid response. Origin 'null' is therefore not allowed access.

Firefox: ReferenceError: $ is not defined

Çok fazla uğraşmayı denedim ancak hata çözülmedi.

Yardımınız büyük memnuniyetle karşılanacaktır.

+2

Bu bit ile ilgili olarak 'Firefox: ReferenceError: $ tanımlı değil' - jQuery'nin yüklendiğinden kesinlikle emin misiniz? –

+0

- google'ın jquery cdn bağlantısını kullanıyorum – iQuestProgrammer

+2

Ayrıca, yerel dosya konumlarına AJAX istekleri yapamaz. İsteği, makinenizde veya uzaktan çalıştıran bir web sunucusuna yapmanız gerekir. –

cevap

3

Bu, html dosyasına çift tıklayarak çalıştırıyor gibi görünüyor. Yani file protokolü ile tarayıcıda çalışacaktır. http://localhost/myhtml.html gibi sunucudan çalıştırmanız gerekir.

Sistemimde kod denedim, sunucuyla çalışıyorum.

Artı

Eğer

$(data).find('a:contains(" + fileExt + ")').each(function() { 

ben ubuntu sistemde, ve krom tarayıcı ile, ihtiyacınız olmayan bu

$(data).find("a:contains(" + fileExt + ")").each(function() { 

yukarıda yerine aşağıdaki satırda söz dizimi hatası var yerini değiştirmek için çünkü yere göre göreceli bir yol dönüyor.

GÜNCELLEME

Nihai kod, bu web sayfasında bir klasördeki tüm dosyaları yazdırmak bu

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){ 
    var fileExt = ".xml"; 

     $(document).ready(function(){ 

      $.ajax({ 
       //This will retrieve the contents of the folder if the folder is configured as 'browsable' 
       url: 'xml/', 
       success: function (data) { 
        console.log(data); 
        $("#fileNames").html('<ul>'); 
        //List all xml file names in the page 

        //var filename = this.href.replace(window.location, "").replace("http:///", ""); 
        //$("#fileNames").append('<li>'+filename+'</li>'); 

        $(data).find("a:contains(" + fileExt + ")").each(function() { 
         $("#fileNames").append('<li>'+$(this).text()+'</li>'); 
        }); 
        $("#fileNames").append('</ul>'); 
       } 
      }); 

     }); 
}); 
//]]> 
</script> 
4
<html> 
<body> 
    <div id='fileNames'></div> 
</body> 
<script src="js/jquery.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $.get(".", function(data) 
     { 
      $("#fileNames").append(data); 
     }); 
    }) 
</script> 

gibi görünmelidir.

+1

Yeterince basit ama bu yola bakacak şekilde nasıl ayarlayabilirim: "/ content /Görüntüler/" ? – blumonde

+1

$ .get ("/ content/images /", işlev (data) {}); bunu yapmak –

+0

Anladım! Teşekkür ederim. – blumonde