Comentario: Incluso si la imagen en línea está codificada en Base64, la ventaja es que puede reducir las solicitudes HTTP, pero la desventaja es que no se puede almacenar en caché en todos los dominios. Use la función ReadAsDataurl en la API del archivo HTML5. Este es un código que convierte el archivo en base64.
Acabo de entrar en contacto con el concepto de imágenes en línea. Incluso si las imágenes en línea están codificadas en Base64, mirando el siguiente código, es un problema en línea.Puede reducir las solicitudes HTTP, pero la desventaja es que no se puede almacenar en caché en todos los dominios.
<img src = "datos: imagen/jpeg; base64,/9j/4qqsrx ...">
Entonces cómo convertir imágenes en base64 en línea
Si confía únicamente en JavaScript simple, tiene problemas de permiso y no permite que los archivos o carpetas de archivos locales funcionen para problemas de seguridad
Ahora que HTML5 viene a Baidu, hay mucha información sobre chino y muchos otros documentos para W3C
Ahora usamos la función ReadAsDataurl en la API del archivo HTML5, que es un archivo de conversión en la codificación base64.
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Prueba de archivo HTML5 simple para PIC2Base64 </title>
<estilo>
</style>
<script>
window.onload = function () {
var input = document.getElementById ("demo_input");
resultado var = document.getElementById ("resultado");
var img_area = document.getElementById ("img_area");
if (typeof (filereader) === 'indefinido') {
resultado.innerhtml = "Lo siento, su navegador no admite FileReader, ¡use un navegador moderno para operar!";
input.SetAttribute ('discapacitado', 'discapacitado');
} demás {
input.AdDeventListener ('Change', ReadFile, False);}
}
función readFile () {
archivo var = this.files [0];
// Aquí juzgamos el tipo si no es una imagen, luego devuélvala y elimínela y cargue cualquier archivo
if (!/image /// w+/. test (file.type)) {
alerta ("Asegúrese de que el archivo sea tipo de imagen");
devolver falso;
}
var lector = new FileReader ();
lector.readasdataurl (archivo);
Reader.onload = function (e) {
resultado.innerhtml = '<img src = "'+this.result+'" />';
img_area.innerhtml = '<div> Imagen IMG TAGEL Pantalla: </div> <img src = "'+this.result+'" />';
}
}
</script>
</ablo>
<Body>
<input type = "file" value = "sdgsdg" />
<Textarea filas = 30 cols = 300> </textarea>
<p> </p>
</body>
</html>