Seleccione una carpeta local en HTML, lea automáticamente todas las imágenes en la carpeta y subcarpetas y muéstrelas en la página.
Análisis técnico:
hay un problemaLlame al método readAsDataURL en la interfaz API web FileReader para leer los datos (la ruta del archivo obtenida por la etiqueta de archivo de este parámetro de función) y luego cargue los datos en FileReader (formato base64). Después de eso, puede usar Img para. especifique los datos de origen en formato base64. Se pueden dibujar imágenes.
dos codigos <!DOCTYPE html><html><head> <title>ReadImageDemo</title></head><body> <tipo de entrada=id de archivo=selectFiles onchange=dealSelectFiles() directorio de kit web múltiple> <id de lienzo=ancho de myCanvas=1440 altura=900></canvas> <tipo de script=texto/javascript> var imgPosX = 0; 256; function dealSelectFiles(){ /// obtener archivos seleccionados. var selectFiles = document.getElementById(selectFiles).files; for(var archivo de selectFiles){ console.log(file.webkitRelativePath); var lector = nuevo FileReader(); lector.readAsDataURL(archivo); lector.onloadend = función(){ /// datos del trato. Image(); /// después del cargador, almacena el resultado del contenido del archivo. img.src = this.result; img.onload = function(){ var myCanvas = document.getElementById(myCanvas); '2d'); cxt.drawImage(img, imgPosX, 0); imgPosX += imgWidth; } } } </script></body></html> tres efectosLo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.