2015-03-30 3 views
6

मुझे एक आवश्यकता है जहां मुझे क्लाइंट साइड में किसी फ़ोल्डर से सभी फ़ाइल नाम पुनर्प्राप्त करने की आवश्यकता है।जावास्क्रिप्ट - फ़ोल्डर में फ़ाइलों का नाम पुनर्प्राप्त करें

इसलिए मैं this answer का जिक्र करते हुए Jquery का उपयोग कर फ़ोल्डर में फ़ाइलों के नाम पुनर्प्राप्त करने का प्रयास कर रहा हूं। इस प्रकार

<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> 

एचटीएमएल कोड है:

मेरे कोड इस प्रकार है

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

लेकिन जब मैं क्रोम में कोड को चलाने मैं निम्नलिखित त्रुटि मिलती है और फ़ायरफ़ॉक्स:

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

Firefox: ReferenceError: $ is not defined

मैंने बहुत कुछ करने की कोशिश की है लेकिन त्रुटि हल नहीं हुई है।

आपकी सहायता की अत्यधिक सराहना की जाएगी।

+2

इस बिट के बारे में 'फ़ायरफ़ॉक्स: संदर्भ त्रुटि: $ परिभाषित नहीं किया गया है '- क्या आप पूरी तरह से सुनिश्चित हैं कि jQuery लोड हो गया है? –

+0

मैं का उपयोग कर रहा हूं - Google के jquery cdn लिंक को लोड करने के लिए – iQuestProgrammer

+2

इसके अलावा, आप भी AJAX अनुरोध स्थानीय फ़ाइल स्थानों पर नहीं कर सकते हैं। आपको वेब सर्वर से अनुरोध करना होगा, या तो अपनी मशीन पर या दूरस्थ रूप से चलाना होगा। –

उत्तर

3

ऐसा लगता है कि आप इसे HTML फ़ाइल पर डबल क्लिक करके चला रहे हैं। तो यह ब्राउज़र में file प्रोटोकॉल के साथ चलाएगा। आपको इसे http://localhost/myhtml.html जैसे सर्वर से चलाना होगा।

मैंने अपने सिस्टम में कोड का प्रयास किया है, यह सर्वर के साथ काम कर रहा है।

प्लस

आप नीचे दिए गए पंक्ति में सिंटेक्स त्रुटि है

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

इस

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

मैं Ubuntu पर हूँ, और क्रोम ब्राउज़र के साथ, आप की जरूरत नहीं है के साथ ऊपर की जगह स्थान बदलने के लिए। क्योंकि यह स्थान के सापेक्ष पथ लौट रहा है।

अद्यतन

आपकी अंतिम कोड इस

<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> 

की तरह दिखना चाहिए इस वेबपेज पर एक फ़ोल्डर में सभी फ़ाइलें प्रिंट होगा।

+1

काफी सरल है लेकिन मैं इसे इस पथ में देखने के लिए कैसे सेट करूं: "/ content /इमेजिस/" ? – blumonde

+1

आप $ .get ("/ content/images /", फ़ंक्शन (डेटा) {}) का उपयोग कर सकते हैं; ऐसा करने के लिए –

+0

समझ गया! धन्यवाद। – blumonde

संबंधित मुद्दे