{"id":28459,"date":"2021-05-26T18:38:00","date_gmt":"2021-05-26T15:38:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28459"},"modified":"2021-10-17T16:43:24","modified_gmt":"2021-10-17T13:43:24","slug":"arrastrar-y-soltar-carga-de-archivos-usando-javascript-y-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/arrastrar-y-soltar-carga-de-archivos-usando-javascript-y-php\/","title":{"rendered":"Arrastrar y soltar carga de archivos usando JavaScript y PHP"},"content":{"rendered":"

\u00bfEst\u00e1 buscando integrar la funci\u00f3n de carga de archivos de arrastrar y soltar en su sitio web? Esta funci\u00f3n es f\u00e1cil de usar y reduce los clics de los usuarios. En este art\u00edculo, estudiamos c\u00f3mo agregar funcionalidad para la carga de archivos de arrastrar y soltar usando JavaScript y PHP. Tambi\u00e9n tendr\u00e1 entrada de archivo para buscar un archivo.<\/p>\n

La interfaz de usuario de carga de archivos final se ver\u00e1 como la imagen a continuaci\u00f3n.<\/p>\n

\"Arrastrar<\/a><\/p>\n

\u00bfPor qu\u00e9 necesita la funci\u00f3n de carga de archivos de arrastrar y soltar?<\/h3>\n

Siempre queremos tener una mejor experiencia de usuario en el sitio web. Dar la funci\u00f3n de arrastrar y soltar para cargar archivos es una opci\u00f3n f\u00e1cil de usar para sus usuarios. Muchos sitios web populares como Facebook, WordPress ya usan esta funci\u00f3n.<\/p>\n

Esta funci\u00f3n se ve mejor en comparaci\u00f3n con la forma tradicional de carga de archivos. Tambi\u00e9n mejora la experiencia del usuario, ya que el usuario simplemente arrastra el archivo y lo carga en un servidor.<\/p>\n

En este tutorial, daremos ambas opciones a los usuarios. Uno puede cargar el archivo usando arrastrar y soltar o mediante la entrada del archivo.<\/p>\n

Voy a usar Ajax para cargar archivos en el lado del servidor. Al usar Ajax, su p\u00e1gina no se cargar\u00e1. Simplemente env\u00eda el archivo al servidor en segundo plano.<\/p>\n

Integrar el cargador de archivos de arrastrar y soltar<\/h3>\n

Para comenzar, primero escribamos el c\u00f3digo HTML. El siguiente c\u00f3digo HTML tendr\u00e1 un contenedor para la carga de archivos. Tambi\u00e9n incluye un archivo CSS y JS que crear\u00e9 en los siguientes pasos.<\/p>\n

<link rel=\"stylesheet\" href=\"style.css\">\n<div id=\"drop_file_zone\" ondrop=\"upload_file(event)\" ondragover=\"return false\">\n\u00a0\u00a0\u00a0\u00a0<div id=\"drag_upload_file\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Drop file here<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>or<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><input type=\"button\" value=\"Select File\" onclick=\"file_explorer();\"><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"selectfile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div>\n\u00a0\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"custom.js\"><\/script><\/code><\/pre>\n
En el HTML anterior, utilic\u00e9 los 2 eventos: ondrop y onclick. Definir\u00e9 sus m\u00e9todos en el custom.js<\/code>archivo. Antes de eso, agreguemos el c\u00f3digo CSS en el style.css<\/code>archivo.<\/p>\n
#drop_file_zone {\n\u00a0\u00a0\u00a0\u00a0background-color: #EEE;\n\u00a0\u00a0\u00a0\u00a0border: #999 5px dashed;\n\u00a0\u00a0\u00a0\u00a0width: 290px;\n\u00a0\u00a0\u00a0\u00a0height: 200px;\n\u00a0\u00a0\u00a0\u00a0padding: 8px;\n\u00a0\u00a0\u00a0\u00a0font-size: 18px;\n}\n#drag_upload_file {\n\u00a0\u00a0width:50%;\n\u00a0\u00a0margin:0 auto;\n}\n#drag_upload_file p {\n\u00a0\u00a0text-align: center;\n}\n#drag_upload_file #selectfile {\n\u00a0\u00a0display: none;\n}<\/code><\/pre>\n
Nuestro objetivo es que cuando un usuario suelta o navega por un archivo, el archivo debe cargarse en el servidor. Para esto, necesita escribir c\u00f3digo JavaScript que toma un archivo del lado del cliente y lo env\u00eda al servidor.<\/p>\n
Para manejar este flujo, agregue el siguiente c\u00f3digo en el custom.js<\/code>archivo.<\/p>\n
var fileobj;\nfunction upload_file(e) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0fileobj = e.dataTransfer.files[0];\n\u00a0\u00a0\u00a0\u00a0ajax_file_upload(fileobj);\n}\n\u00a0\nfunction file_explorer() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('selectfile').click();\n\u00a0\u00a0\u00a0\u00a0document.getElementById('selectfile').onchange = function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fileobj = document.getElementById('selectfile').files[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ajax_file_upload(fileobj);\n\u00a0\u00a0\u00a0\u00a0};\n}\n\u00a0\nfunction ajax_file_upload(file_obj) {\n\u00a0\u00a0\u00a0\u00a0if(file_obj != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var form_data = new FormData();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_obj);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: 'ajax.php',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: form_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success:function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#selectfile').val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
El c\u00f3digo JavaScript escrito anteriormente detecta autom\u00e1ticamente las opciones elegidas por el usuario para cargar un archivo. Finalmente, la funci\u00f3n ajax_file_upload()<\/code>toma el objeto de archivo y lo pasa al archivo Ajax.<\/p>\n
Cargar archivo en el servidor<\/h4>\n
En el archivo Ajax, escribir\u00e9 el c\u00f3digo real que carga el archivo en el servidor. Cree un archivo llamado ajax.php<\/code>y agregue el siguiente c\u00f3digo en \u00e9l.<\/p>\n
<?php\n$arr_file_types = ['image\/png', 'image\/gif', 'image\/jpg', 'image\/jpeg'];\n\u00a0\nif (!(in_array($_FILES['file']['type'], $arr_file_types))) {\n\u00a0\u00a0\u00a0\u00a0echo \"false\";\n\u00a0\u00a0\u00a0\u00a0return;\n}\n\u00a0\nif (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'. time(). '_'. $_FILES['file']['name']);\n\u00a0\necho \"File uploaded successfully.\";<\/code><\/pre>\n
Este c\u00f3digo PHP comprueba primero si la carpeta llamada ‘uploads’ existe en un servidor. De lo contrario, crea un directorio de ‘cargas’ y mueve el archivo dentro de \u00e9l. Puede ajustar esta ruta de directorio seg\u00fan sus necesidades.<\/p>\n
Espero que comprenda c\u00f3mo agregar carga de archivos de arrastrar y soltar usando PHP y JavaScript. D\u00e9jame saber tus pensamientos y sugerencias en el comentario a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n