Selecione uma pasta local em HTML, leia automaticamente todas as imagens da pasta e subpastas e exiba-as na página.
Análise técnica:
Há um problemaChame o método readAsDataURL na interface da API da Web FileReader para ler os dados (o caminho do arquivo obtido pela tag de arquivo deste parâmetro de função) e, em seguida, carregue os dados no FileReader (formato base64). especifique os dados de origem no formato base64. As imagens podem ser desenhadas.
Dois códigos<!DOCTYPE html><html><head> <title>ReadImageDemo</title></head><body> <input type=file id=selectFiles onchange=dealSelectFiles() vários webkitdirectory> <canvas id=myCanvas width=1440 height=900></canvas> <script type=text/javascript> var imgPosX = 0; 256; function dealSelectFiles(){ /// obter arquivos selecionados. var selectFiles = document.getElementById(selectFiles).files; for(var file of selectFiles){ console.log(file.webkitRelativePath); var leitor = new FileReader(); leitor.readAsDataURL(file); leitor.onloadend = function(){ /// dados do negócio. Image(); /// após o carregador, armazenamento do resultado do conteúdo do arquivo img.src = img.onload = function(){ var myCanvas = document.getElementById(myCanvas); '2d'); cxt.drawImage(img, imgPosX, 0); } } } </script></body></html>três efeitos
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.