Varios métodos para cargar archivos en el front-end

El primer tipo: formulario clásico y carga de entradas.

Establezca la acción del formulario como la página de fondo, enctype="multipart/form-data", type='post'lt; form?action='/'?enctype="multipart/form- datos" ?type='post'gt; lt; input?type='file'gt; lt; input?type='hidden'?name='userid'gt; lt; input?type='hidden'?name= 'signature 'gt；lt;buttongt;Submitlt;/buttongt;lt;/formgt;

Utilice la entrada para seleccionar el archivo, establezca los valores de otras entradas, haga clic en Enviar y envíe los datos del archivo y firma y otra información de autenticación para El navegador también saltará a la página correspondiente a la acción establecida por el formulario. Hay dos formas de activar un formulario para enviar datos. Una es hacer clic en el botón lt; input

type='submit'gt; js.método .enviar().

Ventajas: Simple y cómodo de usar, buena compatibilidad, básicamente compatible con todos los navegadores.

Desventajas: 1. La página saltará después de enviar los datos (a continuación se describirá cómo prohibir el salto de página).

2. Debido a que es una solicitud iniciada por el navegador, no un ajax, el front-end no puede saber cuándo finaliza la carga.

3. Para enviar datos que no sean archivos en el formulario, generalmente crea una nueva entrada con tipo = oculto y valor = 'datos a transmitir'. Cada vez que envía datos, necesita una entrada. Una vez que haya más, el dom parecerá redundante.

Consejos:

Después de que el formulario envíe datos, saltará automáticamente a la página especificada por la acción. Para prohibir los saltos de página, puede crear un nuevo ifame vacío en el. página, como name ='upload', y luego establezca el target="Uploader" del formulario. El formulario tiene un atributo de destino que especifica dónde abrir la acción, de modo que el formulario permanecerá en la página actual después de enviar los datos. El código es el siguiente:lt;form?action='/'?enctype="multipart/form-data"?type='post'?target="uploader1"gt;lt;input?type='file'gt; lt;buttongt ;Submitlt;/buttongt;lt;/formgt;lt;ifrmae?name='upload'?id='uploader1'gt;lt;/iframegt;

Otra ventaja de escribir así es que puede saber cuándo se completa la carga y recibir el resultado de la devolución de llamada desde el backend. Por ejemplo, en el ejemplo anterior, los datos del archivo se envían a

'uploadFile.php'. Suponiendo que la página devuelve una dirección después de procesar los datos, la dirección se escribirá en el iframe anterior. Entonces, cuando se activa la función de carga de ifame, es decir, una vez completada la carga, los datos devueltos por el backend se pueden leer en el iframe.

var?iframe?=?document.getElementById('upload1');

iframe.onload?=?function?()?{?

var?doc?=?window. marcos['uploader1'].document; var?pre?=?doc.getElementsByTagName('pre'); var?obj?=?JSON.parse(pre[0].innerHTML);

}

Al utilizar este método, tenga en cuenta que el iframe tiene restricciones entre dominios. Si la dirección del iframe creado proviene de una fuente diferente a la dirección de la página actual, se informará un error. En este caso, se recomienda solicitar nuevamente una interfaz al backend para obtener la dirección del archivo en la función de carga del iframe, en lugar de leerlo directamente en el iframe. O devolver datos como este. lt;script?type="text/javascript"gt;window.top.window[callback](data)lt;/scriptgt;

La devolución de llamada es el nombre acordado con el front-end, que se activa después de que se completa la carga y devuelve datos de backend.

Segundo: use formData para cargar.

Usar js para construir datos de formulario es simple y eficiente, pero solo es compatible al menos con IE10, por lo que los niños que necesitan ser compatibles con IE9 deben omitir este método.

html: lt; input?type='file'gt;

js: var?formData?=?new?FormData(); append("userid",?userid);

formData.append("signature",?signature);

formData.append("file",?file);?/ /el archivo son datos de blob//luego use ajax para enviar formData al servidor.

Tenga en cuenta que debe cargarse en modo de publicación

Nota: El primer método mencionó la creación de múltiples tipos= La entrada 'oculta' se usa para enviar datos de firma. El método formData.append se puede usar para reemplazar esta operación para evitar la situación de múltiples entradas en el dom. Finalmente, agregue los datos del archivo a formData y envíelo al servidor para completar la carga.

Ventajas: dado que este método es de carga ajax, puede saber con precisión cuándo se completa la carga y también puede recibir fácilmente datos de devolución de llamada.

Desventajas: poca compatibilidad

Tercera opción: utilizar fileReader para leer los datos del archivo para cargarlo.

La compatibilidad de la nueva API de HTML5 no es particularmente buena y solo es compatible con IE10. var?fr?=?new?FileReader();

fr.readAsDataURL(archivo);

fr.onload?=?function?(event)?{var?data= ?event.target.result;?//Los datos obtenidos aquí son los datos en formato base64 img.src?=?data;

ajax(url, {data}?, function(){})

}

Los datos obtenidos anteriormente se pueden usar para obtener una vista previa de la imagen localmente antes de cargarla, o se pueden usar para enviar datos base64 al backend y devolver la dirección correspondiente a los datos. bloquear.

Ventajas: Igual que el segundo

Desventajas: Enviar una gran cantidad de datos base64 a la vez hará que el navegador se congele y el servidor también puede tener problemas para recibir dichos datos. .