Um breve registro de alguns códigos que estão carregando H5 esta manhã e ainda há armadilhas
1. Exibir
Como o arquivo de upload front-end deve ser passado através do formulário e o Ajax não pode ser usado. Dessa forma, não é realmente bom colocar uma entrada com o arquivo Type em uma página móvel. Como mostrado na figura abaixo, é muito frustrante?
Depois de encontrar a solução, alguns PCs substituíram essa entrada pelo Flash, usando a biblioteca de ferramentas jQuery, como o Uploady, mas a maioria dos navegadores móveis não suporta flash. Portanto, o método final é usar o formulário, basta definir a transparência do formulário e da entrada como 0, para que eles estejam em uma div com o conteúdo preparado para ser exibido, e o conteúdo exibido pode ser feito conforme você deseja. O código é o seguinte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width de dispositivo, escala inicial = 1.0, user-scalable = no"> <title> </title> Div {width: 100%; margem: 0 auto;} .Upload {Posição: relativa; largura: 80px; altura: 18px; altura da linha: 18px; fundo: #2FC7C9; Text-align: Center; Cor: #fff; preenchimento: 0px 5px; -webkit-border-radius: 2px; radio de borda: 2px; margem: 0 automático; } .Upload Form {Width: 100%; Posição: Absolute; Esquerda: 0; topo: 0; opacidade: 0; filtro: alpha (opacidade = 0);} .Upload formulário de entrada {width: 100%;} </styled> </head> <body> <div> <img src = "img/1.jpg"/> </div> <div> <p> upload imagem </p> <form> <stody type => "/>h/> </hodbody </> </div> <ring> <p> <p> upload imagemA aparência é como mostrado na figura, por isso é exibido na "imagem de upload" P-Tag. Clicar em ele fornecerá o efeito de selecionar o arquivo
2. Código JS
Eu escrevi bastante simples, apenas usando as funções básicas do upload H5
O código HTML é o seguinte, a ação é o caminho a ser solicitado. O que estou fazendo aqui é fazer upload e modificar o avatar quando o arquivo mudar. O atributo de nome da tag de entrada não pode ser omitido, está relacionado à interface de back -end.
<formig id = "uploadForm" rtype = "multipart/form-data" method = "post" action = "xxxxxx"> <input type = "file" name = "imagefile" id = "imagefile" onchange = "filesElected ()"/> </form>
var iMaxFilesize = 2097152; //2mwindow.fileSelected = function () {var ofile = document.getElementById ('imagefile'). Arquivos [0]; // leia o arquivo var rfilter =/^(imagem // bmp | imagem // gif | imagem // jpeg | imagem // png | imagem // tiff) $/i; if (! rfilter.test (ofile.type)) {alert ("formato de arquivo deve ser uma imagem"); retornar; } if (ofile.size> iMaxFilesize) {alert ("O tamanho da imagem não pode exceder 2M"); retornar; } var vfd = new FormData (document.getElementById ('uploadForm'), // Crie solicitação e dados oxhr = novo xmlHttPrequest (); oxhr.addeventListener ('load', function (reproduse) {// succcess}, false); oxhr.addeventListener ('erro', function () {// falhou}, false); oxhr.addeventListener ('abort', function () {// upload interrupt}, false); oxhr.open ('post', actionurl); oxhr.send (vfd);};Os detalhes determinam o sucesso ou o fracasso, então você deve levar tudo a sério.
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.