Cargar archivos desde la máquina local al servidor se denomina carga de archivos. Funciona exactamente igual que la definición, cuando seleccionamos el archivo del navegador y hacemos clic en el botón Enviar, el navegador toma el archivo de la máquina local y lo envía al servidor y el servidor hace su trabajo para guardar el archivo en la ruta definida. Aquí use ajax y jQuery para cargar un archivo de forma asíncrona.
Función utilizada:
- FormData(): Crea un nuevo objeto FormData.
- FormData.append(): agrega un nuevo valor a una clave existente dentro de un objeto FormData, o agrega la clave si aún no existe.
- move_uploaded_file(): Mueve un archivo cargado a una nueva ubicación.
Pasos para ejecutar el Programa:
- Cree una carga de carpeta en el directorio xampp/htdocs.
- Copie y edite el código html/jQuery según el requisito.
- Cree un archivo upload.php y copie el código php que se proporciona a continuación.
- Inicie el servidor Apache y abra el archivo html usando el navegador.
- Seleccione cualquier archivo de texto o imagen y haga clic en el botón Cargar.
- El archivo se cargará en la carpeta «cargar» en xamp/htdocs.
- Si el archivo es una imagen, también se mostrará; si no es un archivo de imagen, se mostrará el mensaje «El archivo cargado no tiene una imagen».
Ejemplo:
- subir.php
<?php
/* Getting file name */
$filename
=
$_FILES
[
'file'
][
'name'
];
/* Location */
$location
=
"upload/"
.
$filename
;
$uploadOk
= 1;
if
(
$uploadOk
== 0){
echo
0;
}
else
{
/* Upload file */
if
(move_uploaded_file(
$_FILES
[
'file'
][
'tmp_name'
],
$location
)){
echo
$location
;
}
else
{
echo
0;
}
}
?>
- Archivo HTML:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Async file upload with jQuery
</
title
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
align
=
"center"
>
<
form
method
=
"post"
action
=
""
enctype
=
"multipart/form-data"
id
=
"myform"
>
<
div
>
<
input
type
=
"file"
id
=
"file"
name
=
"file"
/>
<
input
type
=
"button"
class
=
"button"
value
=
"Upload"
id
=
"but_upload"
>
</
div
>
</
form
>
</
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function() {
$("#but_upload").click(function() {
var fd = new FormData();
var files = $('#file')[0].files[0];
fd.append('file', files);
$.ajax({
url: 'upload.php',
type: 'post',
data: fd,
contentType: false,
processData: false,
success: function(response){
if(response != 0){
alert('file uploaded');
}
else{
alert('file not uploaded');
}
},
});
});
});
</
script
>
</
body
>
</
html
>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por AnkitMishra16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA