HTML5 FormData Método Introducción e archivos de implementación en el archivo de implementación

XMLHTTPREQUEST es una interfaz de navegador. XMLHTTPREQUEST es una forma comúnmente utilizada de interactuar en el presente navegador. En febrero de 2008, se propuso XMLHTTPRequest Nivel 2. que puede cargar archivos binarios. Presentemos cómo cargar archivos con FormData.

Primero mire la forma básica de FormData: FormData Object, puede formar una consulta de todos los elementos y valor de la tabla y enviarlo al fondo. Simplemente pase el formulario de formulario como un parámetro en el constructor FormData:

 var form = document.getElementById (form1);

De esta manera, el FD se puede enviar directamente a través del método AJAX SEND () al fondo.

Se crea el siguiente formulario.

 <Form de nombre = form1 id = form1> <p> name: <input type = text name = name /> <p> gender: <input type = radio name = gender valor = 1 /> masculino <input type = radio name = Valor de género = 2 /p> femenino </p> <p> stu-number: <input type = text name = number /> </p> <p> Photo: <input type = file name = foto id = foto> </p> <p> <input type = button name = b1 value = shit onClick = fsubMit ()/p> </form> <div id = resultado> </div>

El código de arriba crea un formulario, simplemente complete alguna información y seleccione una imagen como avatar, establezca un DIV para almacenar el resultado de la devolución.

Para Simple, todavía usamos AJAX encapsulado por jQuery para transferir datos al fondo:

 Function fsubMit () {var form = document.getElementById (form1); decirle jQuery No procese el contenido de datos: false, // decirle a jQuery que no establezca el éxito de la cabeza de tipo de contenido: función (respuesta, estado, xhr) {console.log (xhr); EJSON (respuesta); + JSON ['Número']; .html (resultado);}});

El servidor.php en el código anterior es el archivo del servidor, que recibe la solicitud AJAX y devuelve el resultado receptor.

 <? Isset ($ _ post ['número'])? ['name'] = $ name; '] = false;} echo json_encode ($ respuesta) ;>

Después de completar la información, haga clic en Enviar para obtener los siguientes efectos en la página.

Si es un entusiasta nativo de JavaScript, por supuesto, las funciones anteriores se pueden lograr a continuación.

 Function fsubMit () {var form = document.getElementById (form1); (Olq. ReadyState == 4) {if (Oreq.Status == 200) {console.log (typeOf Oreq.Responsetext); Información personal: <br/> Nombre:+json ['name']+<br/> género:+json ['género']+<br/> número:+json ['número']; <<< BR /> Avatar: <img src = ' + json [' foto '] +' altura = 50 estilo = border-radius: 50%; post, server.php);

Además de los nuevos objetos anteriores, FormData se pasa directamente al parámetro y hay otras funciones. La mayoría de los artículos introducidos por FormData en Internet solo mencionan el método apend (). Consolamos para saber:

Después de la consola, tenemos un descubrimiento importante.

El método append () se usa para agregar valores clave al objeto FormData:

 fd.append ('key1', value1);

FD es el objeto de FormData, que puede construirse recientemente.

Establezca los valores de clave clave correspondientes del valor

 fd.set ('key1', value1);

Se ve un poco similar al método append (). Aún en comparación con el ejemplo, estamos basados ​​en el formulario delante de la forma.

 fd.append ('nombre', voluntad);

Dos clave es el valor clave del nombre:

 fd.set ('nombre', will);

Solo una clave es el valor clave del nombre:

Lo anterior es la diferencia entre append () y set (). Si el conjunto de valor establecido no existe, el efecto de los dos es el mismo.

Reciba un parámetro, lo que indica que el nombre del valor clave que desea eliminar, si hay múltiples valores de clave de los mismos, lo eliminará:

 fd.append ('nombre', 'voluntad');

Se ha eliminado la información del nombre en formulario y la información de nombre recientemente agregada a través de append ().

Reciba un parámetro para indicar el nombre de la clave que necesita encontrar y devolver el valor del primer valor de la primera clave. Si hay múltiples la misma clave y devuelve todo el valor de valor correspondiente de esta clave.

Basado en el formulario anterior:

 fd.append ('Nombre', 'Will');

 fd.append ('Nombre', 'Will');

Este método también recibe un parámetro, que también es el nombre de la clave, devolviendo un valor booleano para determinar si el objeto FormData contiene la clave. El formulario anterior es un ejemplo:

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

Este método no necesita recibir parámetros y devolver un iterador. El formulario anterior es un ejemplo:

 for (var llave de fd.keys ()) {console.log (clave);}

El resultado es:

nombre

género

número

Foto

Con el iterativo de la clave, por supuesto, es indispensable atravesar el iterador de valor. Valores () es un iterador del valor.

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

resultado:

Hay un iterador que atraviesa la clave, y también están los iteradores de valor, ¡por qué no participar en dos juntos! Entries () es devolver un iterador que contiene un par de valor clave:

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

resultado:

Dado que FormData es una nueva interfaz de XMLHTTPRequest Nivel 2, el navegador IE que ahora es más bajo que IE10 no admite FormData. la figura a continuación:

Lo anterior es todo el contenido de este artículo.