HTML5 FormData Método Introdução e Implementação Arquivos no arquivo de implementação

XmlHttPrequest é uma interface do navegador. XmlHttPrequest é uma maneira comumente usada para interagir dados no presente navegador. Em fevereiro de 2008, foi proposto o Nível 2 do XMLHTTTRequest. que você pode fazer upload de arquivos binários. Vamos introduzir como fazer upload de arquivos com o formData.

Primeiro, olhe para a maneira básica do objeto FormData: FormData, você pode formar uma tentativa de todos os elementos da tabela e valorizá -lo e enviá -lo ao plano de fundo. Basta passar no formulário como um parâmetro no construtor formData:

 var form = document.getElementById (form1);

Dessa forma, o FD pode ser enviado diretamente através do método Ajax send () para o plano de fundo.

O formulário a seguir é criado.

 <Nome de formulário = form1 id = form1> <p> Nome: <entrada de entrada = nome do texto = nome /> <p> gênero: <tipo de entrada = nome do rádio = valor de gênero = 1 /> masculino <tipo de entrada = nome do rádio = nome do rádio = Valor de gênero = 2 /p> fêmea </p> <p> stu-number: <tipo de entrada = nome do texto = número /> </p> <p> foto: <entrada de entrada = nome do arquivo = photo = foto> </p> <p> <tipo de entrada = botão de botão = b1 value = submeter onclick = fsubMit ()/p> </form> <div id = resultado> </div>

O código acima cria um formulário, simplesmente preencha algumas informações e selecione uma imagem como avatar, defina um div para armazenar o resultado do retorno.

Para simples, ainda usamos o Ajax encapsulado pelo jQuery para transferir dados para o plano de fundo:

 Função fsubMit () {var form = document.getElementById (form1); Diga que o jQuery não processe o envio de dados de dados: False, // diga ao JQuery para não definir o sucesso do time de conteúdo: function (resposta, status, xhr) {console.log (xhr); ejson (resposta); + json ['número']; .html (resultado);}});

O servidor.php no código acima é o arquivo do servidor, recebendo a solicitação AJAX e retornando o resultado de recebimento.

 <? ISSET ($ _ POST ['Número'])? [Nome '] = $ Name; '] = false;} echo json_encode ($ resposta);?>

Depois de preencher as informações, clique em Enviar para obter os seguintes efeitos na página.

Se você é um entusiasta nativo de JavaScript, é claro, as funções acima podem ser alcançadas.

 Função fsubMit () {VAR Form = Document.getElementById (formulário) (OLQ. ReadyState == 4) {if (Oreq.status == 200) {Console.log (Typeof Oreq.Responsetext); Informações pessoais: <br/> Nome:+json ['nome']+<br/> Gênero:+json ['gênero']+<br/> Número:+json ['número']; <<< BR /> Avatar: <img src = ' + json [' foto '] +' altura = 50 estilo = radioteio de borda: 50%; post, server.php);

Além dos novos objetos acima do formData, o formulário é passado diretamente para o parâmetro e existem outras funções. A maioria dos artigos introduzidos pelo FormData na Internet menciona apenas o método APEND (). Vamos consolar para saber:

Após o console, temos uma grande descoberta.

O método Append () é usado para adicionar valores -chave ao objeto FormData:

 fd.append ('key1', valor1);

FD é o objeto do FormData, que pode ser construído recentemente.

Defina o (s) valor (s) da chave da chave correspondente

 fd.set ('key1', valor1);

Parece um pouco semelhante ao método Append (). Ainda comparamos através do exemplo, somos baseados no formulário da frente.

 fd.append ('nome', will);

Duas chaves é o valor chave do nome:

 fd.set ('nome', vontade);

Apenas uma chave é o valor chave do nome:

O exposto acima é a diferença entre append () e set (). Se o conjunto de valor definido não existir, o efeito dos dois será o mesmo.

Receba um parâmetro, indicando que o nome do valor da chave que você deseja excluir, se houver vários mesmos valores -chave, ele o excluirá:

 fd.append ('nome', 'will');

As informações do nome no formulário e as informações de nome recém -adicionadas através do append () foram excluídas.

Receba um parâmetro para indicar o nome da chave que você precisa encontrar e retorne o primeiro valor do valor da primeira chave. Se houver múltiplas a mesma chave e retorne todo o valor do valor correspondente dessa chave.

Com base no formulário acima:

 fd.append ('nome', 'will');

 fd.append ('nome', 'will');

Esse método também recebe um parâmetro, que também é o nome da chave, retornando um valor booleano para determinar se o objeto FormData contém a chave. O formulário acima é um exemplo:

 console.log (fd.has ('nome'));

Este método não precisa receber parâmetros e retornar um iterador. O formulário acima é um exemplo:

 for (var chave de fd.keys ()) {console.log (key);}

O resultado é:

nome

gênero

número

Foto

Com o iterativo da chave, é claro, é indispensável atravessar o iterador de valor. Valores () é um iterador do valor.

 for (var valor de fd.values ​​()) {console.log (value);}

resultado:

Há um iterador que atravessa a chave, e também há os iteradores de valor, por que não se envolver em dois juntos! Entradas () é devolver um iterador que contém um par de valores -chave:

 para (var par de fd.entries ()) {console.log (par [0]+ ','+ par [1]);}

resultado:

Como o FormData é uma nova interface do XMLHTTPREQUEST Nível 2, o navegador do IE que agora é menor do que o IE10 não suporta o FormData. A figura abaixo:

O acima é todo o conteúdo deste artigo.