Comentario: Este artículo presenta principalmente la implementación específica de HTML5 leyendo archivos locales. El estilo de estructura HTML, el estilo CSS y el código JS son los siguientes. Amigos que lo necesitan pueden echar un vistazo
El estilo de estructura HTML es el siguiente:<div>
<botón> Agregar imagen </boton>
<form>
<input type = "file" múltiple aceptación = "imagen/*">
</form>
</div>
<img src = "">
Desde el punto de vista de estilo, no se debe mostrar el cuadro de entrada del elemento de entrada. En este momento, la entrada debe establecerse en un estilo transparente y luego sobrescribirla sobre el elemento del botón. Solo entonces puede hacer clic en el botón para cargar la imagen. Establecer aceptado en Image/*, solo se permiten cargas de archivo de imagen.
El estilo CSS es el siguiente
.addpic {
Posición: relativo;
margen-izquierda: 100px;
Ancho: 95px;
Altura: 30px;
}
.addlogo {
Antecedentes: ninguno repite el desplazamiento 0 0 RGBA (0, 0, 0, 0);
cursor: puntero;
tamaño de fuente: 30px;
Opacidad: 0;
Posición: Absoluto;
Derecha: 0;
arriba: 0;
Índice Z: 10;
}
código JS
function ReadFiles (EVT) {
archivos var = evt.target.files;
if (! archivos) {
console.log ("El archivo se invasó");
devolver;
}
for (var i = 0, file; file = files [i]; i ++) {
var imgele = nueva imagen ();
var thesrc = window.url.createObjectUrl (archivo);
imgele.src = thesrc;
imgele.onload = function () {
$ ("#showlogo"). attr ("src", this.src);
}
}
}
$ (documento) .Ready (function () {
$ ("#logoimg"). Change (function (e) {
Arfiles de lectura (E)
});
});