javascript tutorial Como imprimir todos os arquivos txt dentro de uma pasta usando o script java



ler arquivo txt com jquery (2)

Eu preciso imprimir todos os arquivos txt de um diretório dentro de um HTML usando javascript. Eu tentei modificar um código lidar com fotos, mas eu não fiz sucesso

Como carregar todas as imagens de uma das minhas pastas na minha página da web, usando jquery / Javascript

var dir = "D:\Finaltests\test1\new\places";
var fileextension = ".txt";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //List all .txt file names in the page
        $(data).find("a:contains(" + fileextension + ")").each(function () {
         var filename = this.href.replace(window.location.host, "").replace("http://", "");
        $("body").append("<input type='file' onload='readText(" + dir + ")>");


        });
    }
});

Answer #1

você não pode acessar o sistema de arquivos host com o javascript por motivos de segurança. O melhor que você pode fazer é fazer uma única chamada de ajax para um script do lado do servidor (php por exemplo) que irá coletar todo o arquivo html e retorná-los à sua chamada ajax.

gethtml.php:

<?php 


$output = "";

// your list of folders
$folders = [

    'D:\Finaltests\test1\new\places1',
    'D:\Finaltests\test1\old\places2',
    'D:\Finaltests\test1\whatever\places3'
];

foreach ($folders as $key => $dir) {

    if(!is_dir($dir))
        continue;
    // get all files of the directory
    $files = scandir($dir);
    foreach ($files as $file) {

        $finfo = finfo_open(FILEINFO_MIME_TYPE);

        if(finfo_file($finfo, $file) == 'text/plain')
            $output .= file_get_contents($dir . DIRECTORY_SEPARATOR . $file);

    }

}

echo $output;
exit;
 ?>

Chamada Ajax:

$.get('path/to/gethtml.php', function(response){

    $('body').html(response);

});

você pode alterar a linha de php que verifica o tipo de mime de acordo com o tipo de arquivo que você deseja obter (texto simples ou text / html ou qualquer outro)


Answer #2

Você pode usar <input type="file"> com multiple conjuntos de atributos, accept atributo configurado como text/plain ; evento de change ; FileReader , for loop.

var pre = document.querySelector("pre");

document.querySelector("input[type=file]")
.addEventListener("change", function(event) {
  var files = event.target.files;
  for (var i = 0; i < files.length; i++) {
    (function(file) {
      var reader = new FileReader();
      reader.addEventListener("load", function(e) {
         pre.textContent += "\n" + e.target.result;
      });
      reader.readAsText(file)
    }(files[i]))
  }
})
<input type="file" accept="text/plain" multiple />
<pre>

</pre>

Você também pode usar os atributos allowdirs e allowdirs para upload de diretório em chrome, chromium; à noite 45+ ou firefox 42+ onde a preferência dom.input.dirpicker true , veja Firefox 42 para desenvolvedores , Select & Drop Files e / ou Folders para serem analisados . Note, você também pode remover pastas do gerenciador de arquivos no elemento <input type="file">

var pre = document.querySelector("pre");

document.querySelector("input[type=file]")
  .addEventListener("change", function(event) {
    console.log(event.target.files)
    var uploadFile = function(file, path) {
      // handle file uploading
      console.log(file, path);
      var reader = new FileReader();
      reader.addEventListener("load", function(e) {
        pre.textContent += "\n" + e.target.result;
      });
      reader.readAsText(file)
    };

    var iterateFilesAndDirs = function(filesAndDirs, path) {
      for (var i = 0; i < filesAndDirs.length; i++) {
        if (typeof filesAndDirs[i].getFilesAndDirectories === 'function') {
          var path = filesAndDirs[i].path;

          // this recursion enables deep traversal of directories
          filesAndDirs[i].getFilesAndDirectories()
          .then(function(subFilesAndDirs) {
            // iterate through files and directories in sub-directory
            iterateFilesAndDirs(subFilesAndDirs, path);
          });
        } else {
          uploadFile(filesAndDirs[i], path);
        }
      }
    };
    if ("getFilesAndDirectories" in event.target) {
      event.target.getFilesAndDirectories()
        .then(function(filesAndDirs) {
          iterateFilesAndDirs(filesAndDirs, '/');
        })
    } else {
      // do webkit stuff
      var files = event.target.files;
      for (var i = 0; i < files.length; i++) {
        (function(file) {
          uploadFile(file)
        }(files[i]))
      }
    }

  })
<!DOCTYPE html>
<html>

<head>
  <script></script>
</head>

<body>
  <input type="file" webkitdirectory allowdirs directory />
  <pre>

</pre>
</body>

</html>

plnkr http://plnkr.co/edit/Y1XYd9rLOdKRHw6tb1Sh?p=preview

Para solicitações ajax no cromo, file: cromo file: protocolo sistema de arquivos local que você pode iniciar com o --allow-file-access-from-files , consulte jquery load () trabalhando somente no firefox? .

No firefox, você pode definir security.fileuri.strict_origin_policy como false , consulte Security.fileuri.strict origin policy .

Para uma possível abordagem $.ajax() em chrome, cromo você pode tentar

var path = "/path/to/drectory"; // `D:\`, `file:///`
var files = [];
$.ajax({url:path, dataType:"text html"})
.then((data) => {
  // match file names from `html` returned by chrome, chromium
  // for directory listing of `D:\Finaltests\test1\new\places`;
  // you can alternatively load the "Index of" document and retrieve
  // `.textContent` from `<a>` elements within `td` at `table` of
  // rendered `html`; note, `RegExp` to match file names
  // could probably be improved,  does not match space characters in file names
  var urls = $.unique(data.match(/\b(\w+|\d+)\.txt\b/g));
  return $.when.apply($, $.map(urls, (file) => {
    files.push(file);
    // `\`, or `/`, depending on filesystem type
    return $.ajax({url:path + "/" + file
                 , dataType:"text html"})
    .then((data) => {
      // return array of objects having property set to `file` name,
      // value set to text within `file`
      return {[file]:data}
    })
  }))
})
.then((...res) => {
  console.log(res, files)
})




jquery