Comentário: Este artigo apresenta principalmente a implementação específica de HTML5 lendo arquivos locais. O estilo de estrutura HTML, o estilo CSS e o código JS são os seguintes. Amigos que precisam pode dar uma olhada
O estilo de estrutura HTML é o seguinte:<div>
<butter> Adicione a imagem </botão>
<morm>
<input type = "arquivo" múltiplo aceite = "image/*">
</morm>
</div>
<img src = "">
Do ponto de vista do estilo, a caixa de entrada do elemento de entrada não deve ser exibida. No momento, a entrada precisa ser definida como um estilo transparente e, em seguida, substitui -o acima do elemento do botão. Somente então pode clicar no botão para fazer o upload da imagem. Definir aceito como imagem/*, apenas os uploads de arquivo de imagem são permitidos.
O estilo CSS é o seguinte
.Addpic {
Posição: relativa;
margem-esquerda: 100px;
Largura: 95px;
Altura: 30px;
}
.Addlogo {
Antecedentes: ninguém repita rolagem 0 0 rgba (0, 0, 0, 0);
Cursor: Ponteiro;
tamanho da fonte: 30px;
opacidade: 0;
Posição: Absoluto;
Direita: 0;
topo: 0;
Z-Index: 10;
}
Código JS
função readfiles (evt) {
var arquivos var = evt.target.files;
if (! arquivos) {
console.log ("O arquivo é invaild");
retornar;
}
for (var i = 0, arquivo; arquivo = arquivos [i]; i ++) {
var imgele = new Image ();
var thesrc = window.url.createObjecturl (arquivo);
imgele.src = thesrc;
imgele.onload = function () {
$ ("#showLogo"). Att ("src", this.src);
}
}
}
$ (document) .ready (function () {
$ ("#logoImg"). Alterar (função (e) {
Readfiles (e)
});
});