Upload de arquivo de aplicativo html5

Durante muito tempo, os desenvolvedores ficaram angustiados por isso. Alguns sites usam o atributo Enableype = Multipart/Form, mas esse atributo exige que o servidor faça configurações especiais para exibir o progresso e também é complicado nós.

Agora, vamos ver por que o HTML5 pode resolver esse problema e quão bem ele pode ser.

No padrão HTML5, o objeto xmlHttPrequest é redefinido, conhecido como XmlHttPrequest Nível 2, que contém os 5 novos recursos a seguir:

1. Suporte a upload e download de bytes, como arquivos, blobs e dados

2. Adicionado o progresso do upload e download

3. Apoio a solicitações de domínio cruzado

4. Aguarde uma solicitação anônima (ou seja, a parte de referência que não envia HTTP)

5. Permita o tempo limite do pedido

Neste tutorial, prestamos atenção principalmente aos primeiros e segundos recursos, especialmente o segundo item-pode fornecer o progresso do upload que desejamos. Ao contrário do plano anterior, esta solução não exige que o servidor faça configurações especiais, para que todos possam experimentá -la olhando para o tutorial.

O diagrama acima é o conteúdo que podemos alcançar:

1. Exibir as informações do arquivo carregado, como nome do arquivo, tipo, tamanho

2. Uma barra de progresso que pode mostrar um progresso real

3. A velocidade do upload

4. Estimativa do resto do tempo

5. a quantidade de dados que foram carregados

6. A resposta do servidor retornou após o upload acabar

Além disso, com o XMLHTTPREQUEST, nosso processo de upload é assíncrono; portanto, quando o usuário carrega o arquivo, ele ainda pode operar outros elementos na página da Web e não há necessidade de esperar o upload para concluir. Após o término do upload, podemos obter a resposta do servidor, para que todo o processo de upload seja bastante lógico.

O HTML5 adiciona um novo evento de progresso, que nos fornece as seguintes informações:

1. Tamanho total do arquivo

2. Carregado -o tamanho do upload

3. Computable Computable -se o progresso pode ser calculado

Não há muita informação, mas basta calcular o progresso do arquivo. Obviamente, ainda há muitas coisas que não dá diretamente, o que é uma pena.

Não é muito diferente do código de upload de arquivo comum. No entanto, observe que a tag de entrada associa uma função JavaScript no OnChange.

 <! Linha> <Label for = FileTouPLOAD> Selecione um arquivo para fazer upload </cret> <tipo de entrada = nome do arquivo = fileTouPload id = filetouPLOAD = filesElect ted ();/> </div> <div id = filename> </div> <div id = filesize> </div> <div id = filetype> </div> <div class = linha> <tipo de entrada = botão onclick = uPLOPFILE () value = upload/>> << div

Depois de usarmos a entrada no HTML, podemos obter um objeto filelista no código JS. Este objeto faz parte da API de arquivo recém -adicionada no HTML5.

1. Nome - Nome do arquivo (não inclui caminho)

2. Tipo -tipo de arquivo (minúscula)

3. Tamanho do tamanho do arquivo (unidade é byte)

É exatamente isso que precisamos. Obviamente, o HTML5 também possui um objeto FileReader, mas não o usamos aqui. Agora, através dos três conteúdos acima, podemos controlar o tamanho e os tipos de arquivo enviados pelo usuário para reduzir a pressão durante o servidor e melhorar o fator de segurança.

 Function Filected () {Var File = Document.getElementById ('FiletOUPLOAD'). .Size * 100 / (1024 * 1024)) / 100) .Tring () + 'MB'; Document.getElementById ('nome do arquivo') 'Tipo:' + file.type;}}

Então, o que acontecerá quando o usuário escolher um bom arquivo e clicar em fazer upload?

 Função uploadfile () {var xhr = novo xmlHttPrequest (); ; Send (FD);} função UploadProgress (EVT) {if (Evt.LengthComputable) {VAR %Complete = Math.Round. ) + '%';} Else {document.gtElementById ('ProgressNumber') .innerhtml = 'incapaz de calcular';}} função uploadcomplete (evt) { / * Este evento é aumentado quando o servidor envia de volta uma resposta * / alerta (Evt.target.ResponseTxt);

Na segunda linha de código, nosso código JS usa outro novo objeto -FormData lançado por outro HTML5. O objeto FormData é o conjunto dos dados do formulário do usuário. Enviamos dados ao servidor girando esse objeto.

Obviamente, também podemos construir esse objeto manualmente no código, por exemplo, como o seguinte:

 var fd = novo formData (); ]);

De volta ao tópico. Olhando para o código anterior, adicionamos muitos eventos de monitoramento do XMLHTTPREQUEST. Em particular, é importante observar que o que estamos vinculando não é o próprio XmlHttPrequest, mas seus atributos, como o uploadProgress.

Por fim, dê uma olhada no código completo.

 <! [0]; ) + 'MB'; .Name; FD.Append (FileTOUPLOAD, Document.getElementById ('FiletouPLOAD'). FALSO); Porcentagem de porcentagem = Math.Round (Ev.Loaded * 100 / evt.total); Para calcular '; pelo usuário ou pelo navegador retirou a conexão.);} </sCript> </ad Head> <toody> <formig id = form1 ENCTYPE = Multipart/Form-Data Method = Post Action = Upload.php> <Div Class = Linha > <Label = FilEtoup load> Selecione um arquivo para fazer upload </cret> <tipo de entrada = nome do arquivo = fileTOUPLOAD ID = fileTOUPLOAD onchange = filesElect ();/> </div> <div id = filename> </div> < div id = fi lesize> </div> <div id = filetype> </div> <div class = linha> <time de entrada = botão onclick = uploadfile () value = upload/> </div m> </body> </html>

Nossa tarefa está concluída? Pode -se dizer que está completo, porque esse código conseguiu concluir a tarefa de fazer upload de arquivos e também pode exibir o progresso do upload; Temos muitas coisas que não foram feitas, como o CSS, como o CSS embelezado e assim por diante. Mas esse não é o tema do nosso artigo.

Por fim, lembre -se de que o código do tutorial deve ser operado no navegador que suporta os novos recursos.

O acima é todo o conteúdo deste artigo.