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.

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.

Share Improve this question edited May 23, 2017 at 12:32 CommunityBot 11 silver badge asked Mar 30, 2015 at 7:34 iQuestProgrammer 3092 gold badges5 silver badges18 bronze badges

2 Regarding this bit Firefox: ReferenceError: $ is not defined - are you absolutely sure that jQuery is loaded? – kalatabe Commented Mar 30, 2015 at 7:35
I am using <script src="ajax.googleapis.com/ajax/libs/jquery/2.1.3/… the google's jquery cdn link to load it – iQuestProgrammer Commented Mar 30, 2015 at 7:37
3 Also, you cannot make AJAX requests to local file locations. You need to make the request to a web server, either running on your machine or remotely. – Rory McCrossan Commented Mar 30, 2015 at 7:37
1 @Rory McCrossan: Good point.. Then to access local file locations is there any way out using javascript / any client side program. – iQuestProgrammer Commented Mar 30, 2015 at 7:39
Check this out: stackoverflow.com/questions/371875/… or stackoverflow.com/questions/18251432/… or html5rocks.com/en/tutorials/file/dndfiles – choudhury smrutiranjan parida Commented Mar 30, 2015 at 7:44

Add a comment |

2 Answers 2

Sorted by: Reset to default 8

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Javascript - Retrieve names of files in a folder - Stack Overflow

2 Answers 2

Plus

UPDATE

与本文相关的文章

评论列表(0)