XMLHttpRequest es una interfaz de navegador a través de la cual podemos habilitar Javascript para la comunicación HTTP (S). XMLHttpRequest es una forma comúnmente utilizada de datos de interacción de front-end y back-end en los navegadores de hoy. En febrero de 2008, se propuso el borrador XMLHttpRequest Nivel 2. En comparación con la generación anterior, tiene algunas características nuevas. Entre ellas, FormData es un nuevo objeto de XMLHttpRequest Nivel 2. Úselo para enviar formularios y simular envíos de formularios. Por supuesto, la mayor La ventaja es que puedes subir archivos binarios. A continuación, se presentará específicamente cómo usar FormData para cargar archivos.
Instancia de archivo de carga de FormData
Primero observe el uso básico de formData: el objeto FormData puede combinar el nombre y el valor de todos los elementos del formulario en una cadena de consulta y enviarla al fondo. Simplemente pase el formulario de formulario como parámetro al constructor de FormData:
var form = document.getElementById("form1");
var fd = new FormData(form);Copiar
De esta manera, el fd puede enviarse al fondo directamente a través del método send() de ajax.
Lo siguiente crea un formulario de formulario. Además de los datos ordinarios, hay cargas de archivos en el formulario. Pasamos directamente el objeto de formulario como parámetro al objeto FormData:
<form name="form1" id="form1">
<p>name:<input type="text" name="name" /></p>
<p>gender:<input type="radio" name="gender" value="1" />male <input type="radio" name="gender" value="2" />female</p>
<p>stu-number：<input type="text" name="number" /></p>
<p>photo:<input type="file" name="photo" id="photo"></p>
<p><input type="button" name="b1" value="submit" onclick="fsubmit()" /></p>
</form>
<div id="result"></div>Copiar
El código anterior crea un formulario, simplemente completa cierta información, selecciona una imagen como avatar y establece un div para almacenar los resultados devueltos.
Para simplificar, todavía usamos ajax encapsulado en jquery para transferir datos al fondo:
function fsubmit() {
var form=document.getElementById("form1");
var fd =new FormData(form);
$.ajax({
url: "server.php",
type: "POST",
data: fd,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(response,status,xhr){
console.log(xhr);
var json=$.parseJSON(response);
var result = '';
result +="个人信息：<br/>name:"+json['name']+"<br/>gender:"+json['gender']+"<br/>number:"+json['number'];
result += '<br/>头像：<img src="' + json['photo'] + '" height="100" style="border-radius: 50%;" />';
$('#result').html(result);
}
});
return false;
}Copiar
El server.php en el código anterior es un archivo del lado del servidor que recibe solicitudes ajax y devuelve los resultados recibidos. El código específico es el siguiente:
<?php $name = isset($_POST['name'])? $_POST['name'] : ''; $gender = isset($_POST['gender'])? $_POST['gender'] : ''; $number = isset($_POST['number'])? $_POST['number'] : ''; $filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.')); $response = array(); if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){ $response['isSuccess'] = true; $response['name'] = $name; $response['gender'] = $gender; $response['number'] = $number; $response['photo'] = $filename; }else{ $response['isSuccess'] = false; } echo json_encode($response); ?>Copiar
Después de completar la información, haga clic en enviar y podrá obtener los siguientes efectos en la página, y también puede encontrar las imágenes cargadas en la carpeta correspondiente en el lado del servidor.
Si es un entusiasta nativo de JavaScript, por supuesto que puede lograr las funciones anteriores, el siguiente es un código de implementación de JavaScript simple:
function fsubmit() {
var form=document.getElementById("form1");
var formData=new FormData(form);
alert(formData.name);
var oReq = new XMLHttpRequest();
oReq.onreadystatechange=function(){
if(oReq.readyState==4){
if(oReq.status==200){
console.log(typeof oReq.responseText);
var json=JSON.parse(oReq.responseText);
var result = '';
result +="个人信息：<br/>name:"+json['name']+"<br/>gender:"+json['gender']+"<br/>number:"+json['number'];
result += '<br/>头像：<img src="' + json['photo'] + '" height="50" style="border-radius: 50%;" />';
$('#result').html(result);
}
}
};
oReq.open("POST", "server.php");
oReq.send(formData);
return false;
}Copiar
Introducción a los métodos de objetos de FormData
FormData tiene otras funciones además de pasar directamente el formulario como parámetro al crear un nuevo objeto arriba. La mayoría de los artículos sobre la introducción de FormData en Internet solo mencionan el método append(), entonces, ¿qué métodos tiene el objeto FormData? Nos consolamos sabemos:
Después de la consola, hicimos un gran descubrimiento de que el objeto FormData tiene un método de este tipo, por lo que tenemos que probarlo nosotros mismos para averiguar la verdad. A continuación se explican estos métodos uno por uno:
1, agregar ()
El método append() se usa para agregar pares clave-valor al objeto FormData:
fd.append('key1',"value1");
fd.append('key2',"value2");Copiar
fd es un objeto FormData, que puede ser un objeto vacío recién creado, o puede contener ya un formulario u otros pares clave-valor.
2, establecer ()
Establezca el valor correspondiente a los valores de clave clave correspondientes
fd.set('key1',"value1");
fd.set('key2',"value2");Copiar
Se parece un poco al método append() La diferencia entre los dos es que cuando existe el valor clave especificado, el método append() agregará todos los pares clave-valor recién agregados al final, y set() El método será Un par clave-valor que anula la configuración anterior. O a través de ejemplos para comparar, agregamos () o establecemos () nuevos pares clave-valor en base a la forma anterior:
fd.append('name',"will");Copiar
Hay dos pares clave-valor cuya clave es nombre:
fd.set('name',"will");Copiar
Solo hay un par clave-valor cuya clave es nombre:
Lo anterior es la diferencia entre append() y set(). Si el valor de clave establecido no existe, los efectos de los dos son los mismos.
3, eliminar ()
Reciba un parámetro que indique el nombre del valor clave que desea eliminar. Si hay varios valores clave idénticos, se eliminarán juntos:
fd.append('name','will');
fd.delete('name');Copiar
La información del nombre en el formulario y la información del nombre agregada por append() se eliminan.
4. obtener() y obtenerTodo()
Recibe un parámetro que indica el nombre de la clave a buscar y devuelve el primer valor correspondiente a la clave. Si hay varias claves iguales, se deben devolver todos los valores correspondientes a esta clave.
También basado en el formulario anterior:
fd.append('name','will');
console.log(fd.get('name')); // seanCopiar
fd.append('name','will');
console.log(fd.getAll('name')); // ["sean", "will"]Copiar
5, tiene ()
Este método también recibe un parámetro, que también es el nombre de la clave, y devuelve un valor booleano, que se utiliza para determinar si el objeto FormData contiene la clave. Tome el formulario anterior como ejemplo:
console.log(fd.has('name')); // true
console.log(fd.has('Name')); // falseCopiar
6, teclas ()
Este método no necesita recibir parámetros y devuelve un iterador a través del cual podemos recorrer todas las claves en el objeto FormData. Tome el formulario anterior como ejemplo:
for (var key of fd.keys()) {
console.log(key);
}Copiar
El resultado es:
name
gender
number
photoCopiar
7、valores()
Hay iteraciones para recorrer claves y, por supuesto, los iteradores para recorrer valores son indispensables. valores() es un iterador para atravesar valores, y su uso es similar al de claves():
for (var value of fd.values()) {
console.log(value);
}Copiar
resultado:
8, entradas ()
Hay iteradores para recorrer claves e iteradores para recorrer valores, ¿por qué no crear una combinación de ambos? entries() devuelve un iterador que contiene pares clave-valor:
for(var pair of fd.entries()) {
console.log(pair[0]+ ', '+ pair[1]);
}Copiar
resultado:
Problema de compatibilidad de FormData
Dado que FormData es una interfaz recién agregada de XMLHttpRequest Nivel 2, los navegadores IE por debajo de IE10 no son compatibles con FormData. En cuanto al método del objeto FormData presentado anteriormente, no es compatible con los navegadores IE después de la prueba. Específicamente, los principales navegadores La situación de soporte puede hacer referencia a la siguiente figura:
