Subir imagenes con jQuery Uploader
Hace poco tuve la necesidad de subir imagenes en un proyecto usando ajax, pero después de mucho consultar me di cuenta que no es posible subir archivos a mi servidor usando directamente ajax por cuestiones de seguridad, Luego encontré éste plúgin basado en Jquery, Ajax Upload que me permite de una forma sencilla subir archivos al server sin necesidad de recargar toda la página nuevamente. Internamente el plúgin usa un iframe para ello. Lo primero que debemos hacer es descargar el plugin.
Después de añadir jQuery y el plugin a nuestra página
<script language="javascript" src="Scripts/AjaxUpload.2.0.min.js"></script> <script language="javascript" src="Scripts/jQuery.js"></script>
creamos un div en el lugar donde queramos colocar el boton “Subir imagen” o cómo sea que necesitemos llamarlo.
<div id="upload_button">Upload</div>
Ahora colocamos este script al final
<script language="javascript">
$(document).ready(function(){
var button = $('#upload_button'), interval;
new AjaxUpload('#upload_button', {
action: '../Back_end/upload.php',
onSubmit : function(file , ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extensiones permitidas
alert('Error: Solo se permiten imagenes');
// cancela upload
return false;
} else {
button.text('Uploading');
this.disable();
}
},
onComplete: function(file, response){
button.text('Upload');
// enable upload button
this.enable();
// Agrega archivo a la lista
$('#photo').html('<img src="../img/logos/'+file+'">');
$('#Mylogo').val(file);
}
});
});
</script>
En la linea #5 a “Action” le decimos donde quedara nuestro “upload.php” que también lo encontramos en el paquete.
En la linea #7 le especificamos permitir únicamente archivos con extensiones jpg png jpeg y gif.
Éste es el archivo upload.php
<?php
$uploaddir = '../img/logos/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo "success";
} else {
echo "error";
}
?>
En la primera linea le decimos donde queremos que se guarden nuestras imagenes
