web-dev-qa-db-fra.com

Javascript - Récupère les noms des fichiers dans un dossier

J'ai une exigence où j'ai besoin de récupérer tous les noms de fichiers d'un dossier côté client.

Par conséquent, j'essaie de récupérer les noms des fichiers dans un dossier en utilisant Jquery en faisant référence à cette réponse .

Mon code est le suivant:

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

Le code HTML est le suivant:

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

Mais j'obtiens l'erreur suivante lorsque j'exécute le code dans chrome et firefox:

chrome: XMLHttpRequest ne peut pas charger le fichier: /// E:/Test/xml /. Reçu une réponse invalide. L'origine 'null' n'est donc pas autorisée.

Firefox: ReferenceError: $ n'est pas défini

J'ai essayé de googler beaucoup mais l'erreur n'est pas résolue.

Votre aide serait grandement appréciée.

javascriptjqueryjquery-ajaxq
9
iQuestProgrammer
<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>

cela imprimera tous les fichiers dans un dossier sur la page Web.

7
Bhushan Pawar

Il semble que vous l'exécutiez en double-cliquant sur le fichier html. Il s'exécutera donc dans le navigateur avec le protocole file. Vous devez l'exécuter à partir du serveur comme http://localhost/myhtml.html.

J'ai essayé du code dans mon système, cela fonctionne avec le serveur.

Plus

vous avez une erreur de syntaxe dans la ligne ci-dessous

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

remplacer ci-dessus par ce

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

Je suis sur le système ubuntu et avec le navigateur chrome, vous n'avez pas besoin de remplacer l'emplacement. car il renvoie un chemin relatif vers l'emplacement.

METTRE À JOUR

Votre code final devrait ressembler à ceci

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