homefinance blog
Si ha pasado mucho tiempo jugando con archivos de configuración de PHP para obtener un archivo cargado, sabe que cargar archivos grandes puede ser un verdadero dolor. Debe encontrar el archivo cargado de php.ini, editar la configuración upload_max_filesize y post_max_size y espero que nunca tenga que cambiar los servidores y hacer todo esto nuevamente. Me encontré con este problema mientras trabajaba en WP Migra DB Pro. Una de sus características es la capacidad de cargar e importar un archivo SQL. WP Migrate DB Pro se usa en muchos servidores, por lo que tuve que crear una herramienta de carga que pudiera administrar archivos grandes sin alcanzar los límites de carga.
Conoce a la API JavaScript FileReader. Es una manera fácil de leer y procesar un archivo directo en el navegador. La API de JavaScript FileReader ahora tiene un importante soporte de navegador, que incluye Chrome, Firefox, Safari e incluso Internet Explorer 10. Dado que, creemos un ejemplo de archivo JavaScript básico (¡sin Vue o React aquí!). La API de FileReader. Nociones básicas Debido a que la API de FileReader está integrada en JavaScript, la parte HTML de las cosas es fácil y se basa en un formulario HTML básico con un elemento de introducción de archivo:
Para facilitar las cosas, crearemos un clase pequeña que contiene la mayor parte de nuestro código. Colocaremos el formulario anterior en un widget del tablero de WordPress: wp_create_nonce (‘dbi-file -upload’),); } Función pública add_dashboard_widget () {wp_add_dashboard_widget (‘dbi_file_upload’, ‘dbi file upload’, array ($ this, ‘render_dashboard_widget’)); } Función pública render_dashboard>
<? Php}} Con el formulario de carga, deberíamos ver un formulario básico de carga de archivo al visitar la placa de WordPress: Cargar el archivo El formulario HTML no hace nada todavía, así que creemos DBI-File-Sploader. JS y agregue un controlador de evento para el botón de carga. Después de seleccionar el objeto de archivo y crear el objeto FileReader, llamará a upload_file () para iniciar la operación de lectura: (function ($) {var lector = {}; var file = {}; var slice_size = 1000 * 1024; function start_upload (Evento) · Subir-submit ') .on (' hacer clic ', inicio_upload); function upload_file (start) {}) (jQuery); Ahora podemos comenzar a trabajar en la función upload_file () que hará la mayoría de las tareas pesadas. Primero tomamos una parte del archivo seleccionado usando el JavaScript Slice ()::
Function upload_file (start) {var next_slice = start + slice_size + 1;lima block = file.slica (inicio, next_slice);} También tendrá que agregar una función en la función upload_file () que se ejecutará cuando la API de FileReader haya leído desde el archivo.Reader.onloadend = function (event) {if (event.target.readmyte! == filereader.done) {return;} // En este punto, los datos del archivo se cargan a event.target.result};Ahora tenemos que decirle al API FileReader que lea una parte del contenido del archivo.Podemos hacer esto pasando el bloque de datos que creamos el objeto FileReader: Reader.ReadasDataurl (Blob);Vale la pena señalar que usamos el método ReadAsDataurl () del archivo del archivo, no ReadEteText () o ReadAsBinaryString () que están en documentos.
El método ReadAsDataurl () es mejor aquí, porque se lee como base64 en lugar de un texto simple o datos binarios. Esto es importante, porque este último probablemente tendrá problemas de codificación cuando se envíe al servidor, especialmente cuando carga algo más que archivos de texto básicos. Base64 generalmente contendrá solo los caracteres AZ, AZ y 0-9. También es fácil de decodificar con PHP 🙂. Ahora agregemos la llamada AJAX que envía el fragmento al servidor. AJAX CALL CALL SOBLOAD_FILE () cuando se complete la solicitud. Así es como se ve por parte de upload_file () completamente: function upload_file (start) {var next_slice = start + slice_size + 1; lima block = file.slica (inicio, next_slice); Reader.onloadend = function (event) {if (event.target.readmyte! == filereader.done) {return; } $ .AJAX ({url: ajaxurl, type: ‘post’, dumatype: ‘json’, caché: falso, fecha: {dbi_upload_file ‘, file_data: event.target.result, file.name, file_type: file. Tipo, nonce: dbi_vars.upload_file_nonce}, error: function (jqxhr, textStatus, errothrown) {console.log (jqxhr, textTatus, errothrown), éxito: function (date) {varios size_done = start + slice_size; var por ciento = math. Piso ((size_done/ file.size) * 100); if (next_slice <file.size) {// actualizar el progreso de carga (#dbi-supload-procese) .html (`archivo de carga- $ {porcentaje_done}%`); // Más para cargar, llame a la función recussionly upload_file (next_slice);} else {// actualizar el progreso de carga (#dbi-supload-prrogress ') .html (' ¡cargar completo! ');}}}); }; Lector.readasdataurl (blob);
} Y esto también es para el front-end de nuestro ejemplo de carga de archivo JavaScript. Todavía es bastante simple, pero eso debería ser suficiente para que el archivo se cargue del lado del cliente de los archivos. Para hacer esto, agregaremos el método AJAX_UPLOAD_FILE () a nuestra clase de complemento principal: función pública AJAX_UPLOAD_FILE () {check_ajax_referr (‘dbi-file-oPload’, ‘nonce’); $ wp_upload_dir = wp_upload_dir (); $ file_path = trailingsLashit ($ wp_upload_dir [‘parche’]). $ _Post [‘archivo’]; $ file_data = $ this-> decode_chunk ($ _post [‘file_data’)); if (false === $ file_data) {wp_send_json_error (); } file_put_contents ($ file_patch, $ file_data, file_apping); wp_send_json_success (); } Función pública decode_chunk ($ date) {$ date = explode (‘; base64,’, $ data); if (! is_array ($ date) ||! isset ($ date [1])) {retorno falso; } $ date = base64_decode ($ date [1]); If (! $ Date) {false retorno; } devolver $ fecha; } Esto es igual de simple: el método AJAX_UPLOAD_FILE () realiza una verificación rápida de Nonce y luego decodifica los datos en Decode_Chunk (). Si los datos se pueden decodificar desde Base64, se agregan al archivo y a la carga continua.
Con esto, deberíamos poder ejecutar nuestro cargador y el archivo debe guardar de la manera elegida:
¡Y listo, tenemos un cargador de archivo AJAX funcional! Si ha seguido y quiere ver el código completo, lo cargué en GitHub para que pueda echar un vistazo. Conclusión Me gusta lo fácil que es crear una herramienta de carga de archivos AJAX que pueda administrar archivos grandes sin tener que ajustar la configuración en el servidor. Siempre es interesante cuando las ideas que en el pasado solo se han vuelto comunes y mejoran los flujos de trabajo de hoy. Es notable que existan varias bibliotecas de JavaScript existentes, como Fineuploader y Jquy Filsoad, que pueden cargar y cargar archivos grandes. En muchos casos, es más lógico usar el código existente en lugar de reinventar la rueda. Pero nunca le duele entender lo que está sucediendo detrás de escena si alguna vez tiene que remediar un error o agregar una nueva característica. Si usa esto en una aplicación real, definitivamente debe buscar algún problema de seguridad. Esto podría incluir la validación del tipo de archivo, evitando la carga de archivos ejecutables y asegurando que los archivos cargados tengan una cadena aleatoria en nombre del archivo. También es posible querer agregar una forma en que los usuarios interrumpan o cancelen la carga y vuelvan a ella más tarde y registren cualquier error que ocurra durante la carga. Para acelerar las cosas, puede usar la API REST en lugar de Admin-AJAX.PHP.
¿Alguna vez ha tenido que lidiar con grandes cargas de archivos? Si es así, adoptó un enfoque similar o hizo algo completamente diferente? Déjame saber abajo en los comentarios.
