1. API de archivo
HTML5 proporciona dos métodos: Archivo y FileReader, que puede leer información del archivo y leer archivos.
2. Ejemplo
<html> <body> <div id = "test-image-preview" style = "borde: 1px sólido rgb (204, 204, 204); ancho: 100%; altura: 200px; background-size: contiene; background-repeat: no-repeat; posición de fondo: centro de centro;"> </div> <br/> <div id = "test-fili-info"> </diviv type = "file" id = "test-image-file"> <script type = "text/javaScript"> var fileInput = document.getElementById ('test-image-file'), info = document.getElementById ('test-file-Info'), previsual = document.getElementById ('test-image-preVeView'); // escucha a los eventos de archivo: fileInput.Adput.AdeVent. function () {// Borrar imagen de fondo: Preview.Style.BackgroundImage = ''; 'Size:' + file.size + '<br>' + 'modificado:' + file.lastModifiedDate; Filereader (); Reader.readasDataurl (archivo);}); </script> </body> </html>El archivo leído en forma de datos es una cadena, similar a los datos: imagen/jpeg; base64,/9j/4aaqsk ... (codificación base64) ...
Comúnmente utilizado para configurar imágenes. Si se requiere el procesamiento del lado del servidor, envíe la cadena base64 y los siguientes caracteres al servidor y lo decodifique con Base64 para obtener el contenido binario del archivo original.
3. Explicación
El código anterior también demuestra una característica importante de JavaScript, que es el modo de ejecución de un solo hilo. En JavaScript, el motor de ejecución de JavaScript del navegador siempre se ejecuta en modo de subproceso único al ejecutar el código JavaScript, lo que significa que en cualquier momento, es imposible que el código JavaScript se ejecute más de 1 hilo al mismo tiempo.
Puede preguntar, ¿cómo manejar la multitarea en modo de un solo hilo?
En JavaScript, la multitarea se llama en realidad asincrónicamente, como el código anterior:
lector.readasdataurl (archivo);
Se iniciará una operación asincrónica para leer el contenido del archivo. Debido a que es una operación asincrónica, no sabemos cuándo la operación finaliza en el código JavaScript, por lo que primero debemos establecer una función de devolución de llamada:
Reader.onload = function (e) {// Cuando se lee el archivo, esta función se llama automáticamente:};Cuando se completa el archivo que se lee, el motor JavaScript llamará automáticamente la función de devolución de llamada que establecemos. Cuando se ejecuta la función de devolución de llamada, el archivo se ha leído, por lo que podemos obtener de manera segura el contenido del archivo dentro de la función de devolución de llamada.
El simple ejemplo de vista previa del archivo de carga JS es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.