问题

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.

回答1:

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

回答2:

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

问题

回答1:

回答2:

Plus

UPDATE