All geek questions in one place

Javascript - Get file names in a folder

I have a requirement when I need to get all the file names from a folder on the client side.

Therefore, I am trying to get the file names in a folder using jquery, referencing 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>

The HTML code is as follows:

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

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

chrome: XMLHttpRequest cannot load file: /// E: / Test / xml /. Got the wrong answer. Therefore, the original "null" is not allowed.

Firefox: ReferenceError: $ undefined

I tried to work a lot, but the error has not been resolved.

Your help would be greatly appreciated.

+9
source share
3 answers
 <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 the web page.

+5
source

It looks like you launched it by double-clicking the html file. Therefore, it will work in a browser with the file protocol. You must run it from the server, for example http://localhost/myhtml.html .

I tried the code on my system, it works with the server.

Plus

you have a syntax error in the line below

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

replace above with this

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

I am on an ubuntu system and with the Chrome browser you do not need to replace the location. because it returns the relative path to the location.

UPDATE

Your last 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>
+3
source

I put the following code at https://twirlers.bobhurt.com/showfiles.html - it displays a list of files with jquery-1.11.2, but doesn't display anything with jquery-3.3.1. What can I do to make the script work with jquery-3.3.1? Also why

Do tags display an unordered (bulleted) list instead of an ordered (numbered) list?
 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Show Files</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <div id='fileNames'></div> </div> </body> <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> --> <script src="js/jquery-1.11.2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script>//<![CDATA[ $(window).load(function(){ var $filedata = [ [".pdf", "Printable PDF Template Files"], [".svg", "Scalable Vector Graphic Source Files for Editing in Inkscape"] ]; var $folder = "assets/"; $(document).ready(function(){ $.ajax({ //This will retrieve the contents of the folder if the folder is configured as 'browsable' url: 'assets/', success: function (data) { console.log(data); $("#fileNames").html('<br>'); for (var i = 0; i < $filedata.length; i++) { $("#fileNames").append('<h3>'+ $filedata[i][1]+'</h3>'); $("#fileNames").append('<ol>'); $(data).find("a:contains(" + $filedata[i][0] + ")").each(function () { $("#fileNames").append( '<li><a href="'+$folder+$(this).text()+'">'+$(this).text()+'</a></li>'); }); $("#fileNames").append('</ol>'); } } }); }); }); //]]> </script>
0
source

Source: https://habr.com/ru/post/984417/

More articles:


All Articles