Ir para conteúdo
lerdofphp

Como criar uma lista com nome de arquivos dentro de uma pasta, usando JavaScript e HTML?

Recommended Posts

Pessoal, 

 

Tenho uma pasta com arquivos de texto com datas e gostaria de criar uma lista automática com eles apenas usando HTML e JavaScript isso seria possível?

 

A ideia é que o script realize a pesquise dos arquivos existente na pasta e cria-se o SELECT em HTML.

 

Exemplo:

Pasta: paginas

Arquivos:

- Arquivo-12-07.txt
- Arquivo-13-07.txt
- Arquivo-14-07.txt

 

Resultado Esperado:

 

<select>
  <option value="Arquivo-12-07.txt">Arquivo-12-07.txt</option>
  <option value="Arquivo-13-07.txt">Arquivo-13-07.txt</option>
  <option value="Arquivo-14-07.txt">Arquivo-14-07.txt</option>
</select>

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha cara, ler arquivos diretamente com javascript eu não conheço como, se alguém souber me avisa que eu também me interesso!

 Mas o que você pode fazer é fazer uma chamada ajax para o diretório dos arquivos, e se o servidor for Apache e estiver com Directory Listing ligado para aquele diretório, ele vai retornar uma página listando os arquivos e subdiretórios, dai então você pode percorrer o html retornado e ir pescando o nome dos arquivos. 

Aqui a documentação do Apache que fala do Directory Listing (que a grosso modo é aquela página que você vê quando não tem um arquivo index dentro da pasta): https://wiki.apache.org/httpd/DirectoryListings

Não sei se tem essa opção em outros servidores com nginx ou IIS.  Abç

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ótima sugestão do recurso nativo do Apache, @Klawztro.

 

10 minutos atrás, Klawztro disse:

Olha cara, ler arquivos diretamente com javascript eu não conheço como, se alguém souber me avisa que eu também me interesso!

Se estivermos falando do JS rodando no cliente/navegador, não é possível, pois isso abriria uma brecha de segurança enorme.

É possível ter acesso somente aos arquivos do servidor, independentemente da linguagem utilizada (js ou php por exemplo).

 

Há várias formas de listar diretórios com o PHP, mas as primeiras que eu iria sugerir são essas:

- glob: http://php.net/manual/pt_BR/function.glob.php

- DirectoryIterator: https://secure.php.net/manual/pt_BR/class.directoryiterator.php

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 15/07/2018 at 18:19, Klawztro disse:

Olha cara, ler arquivos diretamente com javascript eu não conheço como, se alguém souber me avisa que eu também me interesso!

 Mas o que você pode fazer é fazer uma chamada ajax para o diretório dos arquivos, e se o servidor for Apache e estiver com Directory Listing ligado para aquele diretório, ele vai retornar uma página listando os arquivos e subdiretórios, dai então você pode percorrer o html retornado e ir pescando o nome dos arquivos. 

Aqui a documentação do Apache que fala do Directory Listing (que a grosso modo é aquela página que você vê quando não tem um arquivo index dentro da pasta): https://wiki.apache.org/httpd/DirectoryListings

Não sei se tem essa opção em outros servidores com nginx ou IIS.  Abç

 

Obrigado pelo apoio!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Dr. Programador
      Boa noite, pessoal!
       
      Estou batendo cabeça com a seguinte situação:
       
      Ao digitar no imput text, o texto aparece em tempo real na tela (funciona perfeitamente).
      Ocorre que, quando eu aciono a ação do form, o texto desaparece da tela.
       
      Gostaria que, ao ser acionado a ação do form, o texto que foi digitado no imput text, permaneça na tela. Tentei usar session no javascript mas não obtive sucesso.
       
       
      Vejam o código abaixo:
      Mostra aqui em tempo real: <span id="digitar"></span> <form action="adicionar.php" method="post"> <input name="email" id="email" value="" type="text" onkeyup="myFunction()"> <input name="submit" type="submit" value="Adicionar E-mail"> </form>     <script language="javascript">     function myFunction()     {         var x = document.getElementById("email").value;         document.getElementById("digitar").innerHTML = x;     }     </script>   
    • Por fcastro143
      Boas pessoal tou aqui com um problema
      Quero fazer uma página simples com um formulário onde a pessoa preencha o formulário e quando carrega em enviar ele tem que executar uma função que basicamente é abrir um link mas quero que esse link no fim tenha os dados introduzidos no formulário.

      Imaginem que a pessoa no formulário escreve: 
      Na primeira caixa - Olá 
      Na segunda caixa - tudo bem 

      Eu queria que ela ao clicar em enviar isso abra um link que normal é por exemplo :
      https://api.telegram.org/bot353417269:AAE83uouL6joVytjTCz_4_w3QS3xV4VTOJQ/sendMessage?
      chat_id=@itgrouptest&text= 

      E no fim desse link depois do = insira o que foi introduzido nas caixas de texto uma em cada linha. 

      Acho que me fiz entender ..

      Agradeço a quem perceber e ajudar .. tenho alguma urgência pessoal 
    • Por thia6o
      Olá.
      Sou novo no forum, gostaria de saber como faço para fazer um upload de imagem com preview e manipulação do mesmo.
      Ex: escolho algumas imagens visualizo, e se selecionei alguma erra eu removo e mando fazer o upload.
      Tenho um código que remover a imagem mais quando faço upload ela ainda e mandada.
       
       
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Documento sem título</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <style>
      .container-min-foto{
          height: 200px;
          margin: 15px;
          float: left;
      }
      .miniatura{
          height: 160px;
        }
      .removerImg{
          text-align: center;
          color: #FFFFFF;
          background-color: #4900FF;
          display: inline-block;
          cursor: pointer;
          padding: 5px;
      }
      </style>
      </head>
          
      <body>
      <p><button id="rf">Recaregar</button></p>
          <form method="post" enctype="multipart/form-data">
              <input id="files" name="files[]" type="file" multiple>
              <p><button type="submit">Envuiar</button></p>
          </form>
      <div id="preview"></div>
      <script>
      $(function(){
       if (window.File && window.FileList && window.FileReader) {
           $("#files").change(function(evt) {
              var files = evt.target.files,
                  filesLength = files.length;
          for (var i = 0; i < filesLength; i++) {
                  var f = files
              if (!!f.type.match('image.*')) {
                  var fileReader = new FileReader();
                  fileReader.onload = (function(theFile) {
                      return function(e) {                    
                          $("<span class=\"container-min-foto bord-rad-minFoto\">" +
                            "<img class=\"miniatura bord-rad-minFoto\" src=\"" + e.target.result + "\" title=\"" + theFile.name + "\"/>" +
                            "<br/><span class=\"removerImg\">Remover</span>" +
                            "</span>").insertBefore("#preview");
                              // REMOVER IMAGEM PRE VIEW
                          $(".removerImg").click(function(){
                              $(this).parent(".container-min-foto").remove();             
                          });
                      };
                  })(f);
              fileReader.readAsDataURL(f);
              }else{
                  alert("Você selecionou um arquivo que nao é uma imagem")
              }
          }});
        } else {
            alert("Seu navegador não suporta a API de arquivos")
        }
      });
      </script>
      </body>
      </html>
    • Por tiominga
      Quero que ao clicar na div tchau que esta dentro da oi, o onclick da oi não seja acionado.
      <html> <body> <div onclick=alert('oi');  style="width:50%; top:1%; height:20% position:absolute;z-index:1;border:1px solid">     oi     <div onclick=alert('Tchau'); style="width:50%; top:1%; left:50%; position:absolute;z-index:2;border:1px solid">     tchau     </div> </div> </body> </html>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.