¿Quieres saber como subir archivos al servidor con PHP y AJAX?
La subida de archivos asíncrona, utilizando algún XMLHttpRequest (Ajax), no es técnicamente posible. La mayoría de los ejemplos y tutoriales de JavaScript llaman a este método todavía carga Ajax y la imagen o el archivo se carga mediante el uso de un «IFRAME virtual». De todos modos, sigue siendo una forma amigable de proporcionar una función de carga para sus visitantes o usuarios.
En este rápido tutorial le mostraré cómo crear un formulario de carga de imágenes Ajax utilizando el plugin jQuery Form y mi clase de carga PHP.
Los scripts son muy sencillos, construye tu formulario de subida de imágenes de forma normal. En lugar de enviar los datos del formulario a un script PHP, utilizarás algo de código JavaScript para enviar los datos a un script PHP en segundo plano.
Requisitos:
Un servidor LAMP con PHP5 e ImageMagick activado (opcional)
Mi script de clase de carga PHP
La librería jQuery JavaScript
Y el plugin jQuery Form
Código del tutorial PHP de carga de archivos Ajax
Descargue los archivos necesarios y coloque los archivos JavaScript en el mismo directorio que su documento HTML y coloque el siguiente código JavaScript en la cabecera HTML:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxComplete(function(){
$(this).hide();
});
var options = {
beforeSubmit: showRequest,
success: showResponse,
url: 'upload4jquery.php', // your upload script
dataType: 'json'
};
$('#Form1').submit(function() {
$('#message').html('');
$(this).ajaxSubmit(options);
return false;
});
});
function showRequest(formData, jqForm, options) {
var fileToUploadValue = $('input[name=fileToUpload]').fieldValue();
if (!fileToUploadValue[0]) {
$('#message').html('Please select a file.');
return false;
}
return true;
}
function showResponse(data, statusText) {
if (statusText == 'success') {
if (data.img != '') {
$('#result').html('<img src="/upload/thumb/'+data.img+'" />');
$('#message').html(data.error);
} else {
$('#message').html(data.error);
}
} else {
$('#message').html('Unknown error!');
}
}
</script>A continuación, cree un script PHP llamado «upload4jquery.php» y colóquelo en el mismo directorio donde se encuentran los demás archivos. Coloca este código en tu archivo PHP:
<?php
include($_SERVER['DOCUMENT_ROOT'].'/classes/upload/foto_upload_script.php');
$foto_upload = new Foto_upload;
$json['size'] = $_POST['MAX_FILE_SIZE'];
$json['img'] = '';
$foto_upload->upload_dir = $_SERVER['DOCUMENT_ROOT']."/upload/";
$foto_upload->foto_folder = $_SERVER['DOCUMENT_ROOT']."/upload/";
$foto_upload->thumb_folder = $_SERVER['DOCUMENT_ROOT']."/upload/thumb/";
$foto_upload->extensions = array(".jpg", ".gif", ".png");
$foto_upload->language = "en";
$foto_upload->x_max_size = 480;
$foto_upload->y_max_size = 360;
$foto_upload->x_max_thumb_size = 120;
$foto_upload->y_max_thumb_size = 120;
$foto_upload->the_temp_file = $_FILES['fileToUpload']['tmp_name'];
$foto_upload->the_file = $_FILES['fileToUpload']['name'];
$foto_upload->http_error = $_FILES['fileToUpload']['error'];
$foto_upload->rename_file = true;
if ($foto_upload->upload()) {
$foto_upload->process_image(false, true, true, 80);
$json['img'] = $foto_upload->file_copy;
}
$json['error'] = strip_tags($foto_upload->show_error_string());
echo json_encode($json);
?>Este tutorial o guía no es sobre cómo usar la clase PHP upload. Si nunca ha utilizado la clase antes, entonces pruebe primero los archivos de ejemplo y luego el formulario de carga Ajax.
Rutas y directorios de subida
Necesita crear dos directorios de carga: Uno para el archivo principal y otro para las miniaturas. Compruebe/cambie el permiso de los directorios (CHMOD los directorios con 0755). Si utiliza la misma estructura que se sugiere en el archivo de clase PHP, no es necesario cambiar los includes en la parte superior del script PHP.
Ahora necesitamos crear el formulario HTML y algunos otros contenedores donde se colocarán los datos de respuesta.
<form id="Form1" method="post" action="">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_size; ?>" />
Select an image from your hard disk:
<div>
<input type="file" name="fileToUpload" id="fileToUpload" size="18" />
<input type="Submit" value="Submit" id="buttonForm" />
</div>
</form>
<img id="loading" src="loading.gif" style="display:none;" />
<p id="message"></p>
<div id="result"></div>
El archivo loading.gif es la imagen indicadora de carga, elige el archivo que he utilizado en la página de demostración o busca en Google otras imágenes con estilo o utiliza un generador de imágenes online.
Alguna nota final, el código funciona tal cual. No cambies los nombres de las variables o los atributos de los campos del formulario, si no estás seguro de cómo cambiarlos dentro de tu código JavaScript.