Introducción
Usando el objeto FileReader, las aplicaciones web pueden leer asincrónicamente el contenido de los archivos (o buffers de datos sin procesar) almacenados en la computadora del usuario y pueden usar objetos de archivo o objetos BLOB para especificar el archivo o los datos que se procesarán. El objeto de archivo puede ser desde el objeto Filelist devuelto por el usuario después de seleccionar un archivo en un elemento <input type = "text" />, o desde el objeto dataTransfer generado por la operación de arrastrar y soltar, o desde el resultado de retorno después de ejecutar el método mozgetasfile () en un htmlcanvaselement.
Múltiples páginas, cargar varios códigos de demostración de imágenes
<! Doctype html> <html> <head> <title> cargue la imagen para mostrar la imagen de vista previa </title> <style> #result img {altura: 100px; Pantalla: bloque en línea; margen-derecha: 10px; margen-fondo: 10px; } </style> </head> <body> <div> <p> <label> Seleccione un archivo de imagen: </etiqueta> <input type = "file" id = "file_input" style = "display: none;" /> </p> <div id = "resultado"> <a href = "javascript: void (0);"> Agregar imagen </a> </div> </div> <div> <p> <label> Seleccione un archivo de imagen: </selete> <input type = "file" id = "file_input" style = "display: none;" /> </p> <div id = "resultado"> <a href = "javascript: void (0);"> Agregar imagen </a> </div> </div> <script src = "jQuery-2.2.1.min.js"> </script> <script> $ (". add_img_btn"). Unboin $ (this) .Parents (". ADD_IMGS"). Find ("input [type = file]"). Click (); "Lo siento, su navegador no admite Filereader"; input.SetAttribute ('discapacitado', 'discapacitado'); } else {$ (input) .Unbind ("Change"). On ("Change", function () {var file = this.files [0]; if (!/image /// w+/. test (file.type)) {alert ("archivo debe ser una imagen una imagen; $ (resultado) .Append ('<img src = "'+this.result+'"/>');Lo anterior se trata de este artículo, y espero que sea útil para todos aprender la programación de JavaScript.