I have a requirement where I need to retrieve all the filenames from a folder in client side.

Hence I am trying to retrieve the names of the files in a folder using Jquery referring to this answer.

My code is as follows:

    <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 code is as follows:

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

But I get the following error when I run the code in chrome and firefox:

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

Firefox: ReferenceError: $ is not defined

I have tried googling a lot but the error is not resolved.

Your help would highly be appreciated.

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

this will print all the files in a folder on webpage.

It looks like you are running it by double clicking on html file. So it will run in browser with file protocol. You have to run it from server like http://localhost/myhtml.html.

I have tried code in my system, it's working with server.

Plus

you have syntax error in below line

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

replace above with this

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

I'm on ubuntu system, and with chrome browser, you do not need to replace location. because it is returning relative path to location.

UPDATE

Your final code should look like this

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

来源：https://stackoverflow.com/questions/29340664/javascript-retrieve-names-of-files-in-a-folder

标签

javascript

jquery

jquery-ajaxq

Javascript - Retrieve names of files in a folder

Plus

UPDATE