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 patriciahelena
      Boa noite,
       
      Preciso de ajuda.
      No arquivo form.php tenho 3 inputs de entrada(valor1, valor2, valor3) e 3 inputs(disabled) que receberão os valores calculados do arquivo form_matematico5.php.
      Na tag form onsubmit="return calcula()"
       
          <h4 class="calcula"></h4>
       
      <script>
      function calcula($volmedio, $temp, $precogas) {
      $.get("form_matematico5.php", $('#calculorecovap').serialize(),
          function(data){
              $('.calcula').html(data);
          }
      );
      return false;
      }
      </script>
       
       
      No arquivo form_matecatico5.php é feito os calculos gerando 3 valores. 
      Tenho um echo:
      echo 'texto<br><div style=font-size:23px;color:red;>' . number_format($Resultado1,0,",","."). '</div> <br> texto<br><div style=font-size:23px;color:red;>'. number_format($Resultado2,0,",","."). '</div> <br>texto<br><div style=font-size:23px;color:red;>R$ '. number_format($Resultado3,2,",","."). '</div>';
       
      Ele retorna o echo certinho em     <h4 class="calcula"></h4>.
      Mas o que eu quero mesmo é que Resultado1 retorne dentro do primeiro input(disabled), o Resultado2 dento do segundo input(disabled) e assim com o terceiro. Ou seja,
      Cada input(disabled), recebera um valor diferente e não o total de .calcula.
       
      Espero ter explicado direitinho,
      Obrigada
       
       
       
       
       
       
       
    • Por Claudia França
      Pessoal escrevi o código,  (  <style id=”antiClickjack”>body{display:important;}</style>
      <script type=”text/javascript”>
      if (self === top) {
      var antiClickjack = document.getElementById(“antiClickjack”);
      antiClickjack.parentNode.removeChild(antiClickjack);
      } else {
      top.location = self.location;
      }
      </script> ) em um site o head por exigência da empresa de cartão, mas tenho percebido que com um tempo o site para de acionar o java script para carregar outra pagina.  Isso aconteceu depois desse código. Eu tenho que escrever algo no corpo no site para isso nao mais acontecer e deixar o anticlick habilitado. ?
    • Por Solo
      Boa noite  pessoal, estou com um problema, sou iniciante me php e estou em duvida com como posso fazer uma paginacao de produtos do banco de dados...... alguem poderia me ajudar ou me indicar um tutorial ???
       
      <?php
      error_reporting(0);
      ini_set(“display_errors”, 0 );
      require_once("conexao.php"); 
         $produtos = "SELECT produto_ID, nome_produto, imagem_produto, valor ";
          $produtos .= "FROM produto ";
          $resultado = mysqli_query($conecta, $produtos);
          if(!$resultado) {
              die("Falha na consulta ao banco");   
          }
      ?> 
       
       
       
      AONDE LISTA OS PRODUTOS 
       
       
       
          <div class="rowproducts">
          <div id="listagem_produtos2" class="">
            <?php while($linha=mysqli_fetch_assoc($resultado)) {   ?>
                       
                      <ul>
                          <div class="class22">
                          
                          <li>
                              
                              <img  class="img-responsive"  height="200" width="200" src="<?php echo $linha["imagem_produto"]?> "  >
                              </li>
                              
                              <li class="nproduto"><?php echo $linha["nome_produto"]?></li>
                               <li class="nproduto">R$ <?php echo $linha["valor"]?></li>
                          </div>
                          </ul>
                          
                          
                          
                          
                          
                          
                          
                      
                  <?php } ?>
                      
                      
                      
                    </div>
                    </div>
       
       
       
       
    • Por lindomar55
      ola amigos preciso de uma ajudinha, estou montando uma aplicaçao usando vb.net windows forms. nela tenho um botao onde chamo uma url no chrome com o seguinte comando.
      Private Sub Btn_abrir_site_Click(sender As Object, e As EventArgs) Handles Btn_abrir_site.Click
              Dim url As String = “https://www.rico.com.você/dashboard/tesouro-direto/“
              Process.Start(url)
          End Sub
      no google entao eu acesso com meu logim manualmente(prefiro assim). e em realizo uma serie de operaçoes, chega um determinado momento que preciso passar passar os dados que o site me apresenta entao(apos as operaçoes) para o aplicativo. ai é que esta o problema. neste ponto estou boiando.
      no codigo abaixo por exemplo: precisava obter os valores 12,36 e 8806,84 de forma automatica e colocar em textbox.
      vi exemplos na net que mostram com webbrowser porem eu prefiro que seja com o chrome. e nesses exemplos ele abre a pagina e ja obtem os dados. eu preciso trabalhar na pagina muiiiito e so depois baixar os dados programaticamente.
      qualquer ajuda sera bem vinda....
       

    • Por Carcleo
      jQuery:
          // JavaScript Document          $(document).ready(function (e) {                  $("#idPastor").on("change", function () {                          $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRedes.php",                 type: "POST",                 dataType: "json",                 data: {                       idPastor: $("#idPastor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRede').find('option').remove();                                          if (result == null){                         $("#idRede").append("<option value=>Sem Redes</option>");                     } else {                         $("#idRede").append("<option value=>Escolha a Rede</option>");                         result.forEach(function(option){                             $("#idRede").append("<option value=" + option["idRede"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRede").on("change", function () {                                                $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRegioes.php",                 type: "POST",                 dataType: "json",                 data: {                       idRede: $("#idRede").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRegiao').find('option').remove();                     if (result == null){                         $("#idRegiao").append("<option value=>Sem Regiões</option>");                     } else {                         $("#idRegiao").append("<option value=>Escolha a Região</option>");                                                 result.forEach(function(option){                             $("#idRegiao").append("<option value=" + option["idRegiao"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRegiao").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosAreas.php",                 type: "POST",                 dataType: "json",                 data: {                       idRegiao: $("#idRegiao").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                             $('#idArea').find('option').remove();                                 if (result == null){                             $("#idArea").append("<option value=>Sem Áreas</option>");                     } else {                                     $("#idArea").append("<option value=>Escolha a Área</option>");                             result.forEach(function(option){                             $("#idArea").append("<option value=" + option["idArea"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idArea").on("change", function () {                                                   $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosSetores.php",                 type: "POST",                 dataType: "json",                 data: {                       idArea: $("#idArea").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idSetor').find('option').remove();                                             if (result == null){                         $("#idSetor").append("<option value=>Sem Setores</option>");                     } else {                         $("#idSetor").append("<option value=>Escolha a Setor</option>");                                 result.forEach(function(option){                             $("#idSetor").append("<option value=" + option["idSetor"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idSetor").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosCelulas.php",                 type: "POST",                 dataType: "json",                 data: {                       idSetor: $("#idSetor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idCelula').find('option').remove();                             if (result == null){                         $("#idCelula").append("<option value=>Sem Celulas</option>");                     } else {                         $("#idCelula").append("<option value=>Escolha a Célula</option>");                                 result.forEach(function(option){                             $("#idCelula").append("<option value=" + option["idCelula"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                   }); Esse script, faz a população via $.ajax do jQuery de combos no form.
      Tudo funciona bem.
      Mas considere o o form abaixo:

       
      Imagine o que o usuário preencheu todos os campos e de repente resolve tocar a opção do select de Redes como está na figura.
      Porém, a opção Rede 2 NÃO possui Regiões Cadastradas ainda.
      No entanto, note que todos os campos abaixo estão preenchidos e isso não negaria um possível submit do form com dados errados?
      Ainda,  imagine a situação onde a opção Rede 2 POSSUI outas Regiões Cadastradas o que comprometeria a escolha dos selects que seguem
       
      Como contornar esse problema?
       
×

Informação importante

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