No explicaré en detalle la API del archivo aquí. Nos cuidemos. Cuando venimos, tenemos que usar el mango del archivo para leer el contenido del archivo. Esto se logra a través de FileReader. A través de la interfaz FileReader, podemos cargar el contenido del archivo de forma asincrónica en la memoria y asignar una cierta variable JS.
La copia del código es la siguiente:
function getImgSrc (target, llamado) {
if (window.filereader) {
var opreviewimg = null, ofReader = new Window.Filereader ();
ofReader.onload = function (ofRent) {
opreviewimg = new Image ();
var type = target.files [0] .type.split ("/") [1];
var src = ofrevent.target.result;
opreviewimg.src = src;
if (typeof llamado == "función") {
devolución de llamada (OpreviewImg, Target, Type, SRC);
}
return opreviewimg.src;
};
return (function () {
var afils = target.files;
if (afiles.length === 0) {
devolver;
}
if (! isimgType (afiles [0] .type)) {
alerta ("¡Debe seleccionar un archivo de imagen válido!");
devolver;
}
if (afiles [0] .size> 1024 * 1024) {
Target.Value = "";
alerta ('cargue el tamaño del archivo de imagen inferior a 1m.');
devolver;
}
ofReader.ReadasDataurl (afils [0]);
}) ();
}
if (navigator.appname === "Microsoft Internet Explorer") {
return (function () {
document.getElementById ("ImagePreview"). Filters.Item ("dximagetransform.microsoft.alphaimageloader"). src = target.value;
}) ();
}
}
El anterior es el código clave para cargar imágenes con JavaScript combinado con FileReader. ¿Te gusta?