SUBIR FOTO CON JQUERY PHP MYQL

<!DOCTYPE HTML>

<head>

<title>Guardar usuario con imagen</title>

body {margin: 0px; padding: 0px;}

.Seccion {width: 400px; margin: 0.5em; background-color: #DDDDDD;}

#vistaPrevia {background-color: #FFFFFF; vertical-align: top; border: 1px solid

#444444;

}

</style>

</head>

<body>

<h2>Crear/Actualizar Usuario</h2>

<label for="idUsuario" >ID (entero):</label>

<label for="nombreUsuario" >Nombre:</label>

<label for="imagenUsuario" >Imagen:</label>

</div>

//El código Javascript lo verás más abajo...

</script>

</body>

</html>

jQuery('#seleccionarImagen').on('change', function(e) {

var Lector,

oFileInput = this;

if (oFileInput.files.length === 0) {

return;

};

Lector = new FileReader();

Lector.onloadend = function(e) {

jQuery('#vistaPrevia').attr('src', e.target.result);

};

Lector.readAsDataURL(oFileInput.files[0]);

});

jQuery('#actualizarUsuario').on('click', function(e) {

e.preventDefault();

var parametros = {

id : jQuery('#idUsuario').val(),

nombre : jQuery('#nombreUsuario').val(),

imagen : jQuery('#temporal').attr('src')

};

$.ajax('guardar_imagen.php', {

type : 'post',

data : parametros,

success : function(data) {

if(data.error){

console.log('Error controlado.', data.mensaje);

return;

};

console.log('Los datos del usuario ' + parametros.id + ' fueron guardados.');

error : function(data) {

console.log('Error no controlado.', data);

}

});

return false;

});

El código consiste en dos controladores de eventos. El primero detecta cuando el usuario

selecciona una imagen y genera una vista previa a partir de ella (en mi artículo Vista

previa de imagen en el navegador puedes ver más información al respecto). En resumen, este

controlador leerá la imagen seleccionada en el control fileinput, y la copiará al elemento

img.

El segundo controlador se encargará de enviar al servidor los datos para actualizar cuando

el usuario haga clic en el botón correspondiente. Este código primero busca los datos a

enviar (ID, nombre e imagen) y los almacena en el objeto parametros (¿te parece raro que

leamos la imagen de img en lugar del inputfile? en la sección final te explicaré porqué…

sigamos); luego lo envía mediante un post, con jQuery, al archivo guardar_imagen.php que

esperará los datos para procesarlos.

Recibir la imagen con PHP y guardarla en MySQL

Antes que nada: no soy un gurú de PHP, así que el código presentado a continuación no es

necesariamente el más seguro, ni el más mantenible; por el contrario, es un código simple

que explica el punto central del post.

Hecha la aclaratoria, veamos ahora el contenido del archivo de utilidades:

//Función auxiliar para errores (solo AJAX)

function mostrar_error($mensaje_error){

$arr = array("error" => true, "mensaje" => $mensaje_error);

echo json_encode($arr);

exit();

};

//Conexión a la base de datos

function abrirConexion(){

$db_host = '127.0.0.1'; //La dirección del servidor de BD

$db_user = 'mi-usuario-mysql';

$db_pw = 'mi-contrasena-mysql';

$db_name = 'mi-base-de-datos-mysql';

$connection = mysqli_connect($db_host, $db_user, $db_pw, $db_name);

if (!$connection) {

mostrar_error("No se puede conectar al servidor\\base de datos: $db_host\\$db_name");

}

return $connection;

}

Este script es bastante simple: una función encargada de generar una respuesta JSON en caso

de un error (un error «controlado») para ser recibida por las llamadas a $.ajax(). La otra

función se encarga de abrir la conexión a la base de datos usando la extensión de PHP MySQLi

(NOTA: fíjate que no estoy usando la extensión tradicional MySQL, sino mysqli; tienen casi

las mismas funciones pero la sintaxis es distinta). Para el ejemplo solo programé el mínimo

código necesario para abrir la conexión y manejar errores, incluso coloqué las credenciales

de la base de datos directamente en el script; queda de tu parte programar la conexión a la

base de datos siguiendo procedimientos más seguros.

Este archivo de utilidades será incluido en el segundo script, mostrado a continuación:

include_once 'utilidades.php';

//Leemos los datos del usuario

$id = $_POST["id"];

$nombre = $_POST["nombre"];

//NOTA: La imagen viene en Base 64 (porque así la enviamos desde consultar.html)

$img = $_POST["imagen"];

//Abrimos una conexión a la base de datos

$conexion = abrirConexion();

//escapamos antes de armar la consulta

$id = mysqli_escape_string($conexion, $id);

$nombre = mysqli_escape_string($conexion, $nombre);

$img = mysqli_escape_string($conexion, $img);

//Si el usuario no existe lo insertamos,

//y si ya existe lo actualizamos

$consulta_sql = "INSERT INTO usuarios(id, imagen, nombre)\n".

" VALUES ('$id', '$img', '$nombre')\n".

"ON DUPLICATE KEY\n".

" UPDATE imagen = VALUES(imagen), nombre=VALUES(nombre);";

mysqli_query($conexion, $consulta_sql)

or mostrar_error("Error al ejecutar la consulta:\n$consulta_sql.\n\n".

mysqli_errno($connection) . ": " . mysqli_error($connection));

//La respuesta en formato JSON...

$respuesta = array(

'ok' => true

);

echo json_encode($respuesta);

/////////////////////////////////////////////////////

$(document).ready(function() {

$(".upload").on('click', function() {

var formData = new FormData();

var files = $('#image')[0].files[0];

formData.append('file',files);

$.ajax({

url: 'upload.php',

type: 'post',

data: formData,

contentType: false,

processData: false,

success: function(response) {

if (response != 0) {

$(".card-img-top").attr("src", response);

} else {

alert('Formato de imagen incorrecto.');

}

});

return false;

});

</script>

El código anterior también puede estar incrustado justo antes de la etiqueta de cierre

</body>.

Tan solo estamos esperando a que se haga click en el botón que contiene la clase «upload»

para obtener el archivo seleccionado desde el ordenador para pasarlo al archivo «upload.php»

para que pueda ser procesado en el servidor. Una vez se ha proceso la imagen en el servidor,

si la respuesta es diferente de 0, el atributo src de nuestra imagen se cambiará por la

respuesta. En caso contrario mostrar un alerta de error.

La clave del asunto está en la utilización de la clase FormData.

Los objetos FormData permiten compilar un conjunto de pares clave/valor para enviar mediante

XMLHttpRequest. Están destinados principalmente para el envío de los datos del formulario,

pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados.

Los datos transmitidos estarán en el mismo formato que usa el método submit() del formulario

para enviar los datos si el tipo de codificación del formulario se establece en

«multipart/form-data».

En el ejemplo estamos creando un objeto de tipo FormData para agregarle la imagen. El objeto

FormData se lo pasamos al archivo PHP mediante la técnica Ajax. De esta forma, en el archivo

PHP tendremos la información necesaria para procesar la imagen.

Este código también puede ser útil para subir otro tipo de archivos, tan solo realizando

algunos ajustes.

Código HTML que debes añadir dentro del body de tu página

En el cuerpo o dentro de la etiqueta <body> agregamos el formulario que permite subir

archivos:

Source code

<p class="card-text">Sube una imagen...</p>

<label for="image">Nueva imagen</label>

</div>

</div>

</form>

Se trata de un formulario simple que utiliza el atributo enctype=»multipart/form-data» para

permitir la subida de archivos y se apoya de la tecnología Bootstrap para el diseño. Tan

solo tenemos una imagen por defecto, el campo para seleccionar una imagen desde el ordenador

y un botón que permite realizar la acción de subida al servidor.

Código PHP que se ejecuta en el servidor

El arhivo «upload.php» que usamos para procesar la imagen contiene lo siguiente:

Source code

<?php

if (($_FILES["file"]["type"] == "image/pjpeg")

|| ($_FILES["file"]["type"] == "image/jpeg")

|| ($_FILES["file"]["type"] == "image/png")

|| ($_FILES["file"]["type"] == "image/gif")) {

if (move_uploaded_file($_FILES["file"]["tmp_name"], "images/".$_FILES['file']['name']))

{

//more code here...

echo "images/".$_FILES['file']['name'];

} else {

echo 0;

}

} else {

echo 0;

}

Simplemente comprobamos que el archivo que se está intentando subir sea del tipo adecuado.

En este caso, solo queremos que se puedan subir imágenes .png, .jpg o .gif y, seguidamente,

usamos la función move_uploaded_file() de PHP para depositar el archivo seleccionado en el

lugar que deseamos. Lo guardamos con el mismo nombre de subida.

Después de esta acción se podrían hacer muchos más procesos, como por ejemplo registrar algo

en la base de datos o enviar un email. Recuerda que todo esto se puede hacer sin recargar la

página.

Como respuesta usamos la función echo de PHP para retornar un 0 en caso de error o la ruta

del archivo subido para depositarlo en el src tal y como puedes ver en el success de la

llamada Ajax.

////////////////////////////////////////////////

var datos = $("#formularioAltaEmpleados").serialize();

var foto = $('input[name="foto"]')[0].files[0];

const infoEmpleado = new FormData();

infoEmpleado.append('datos', datos);

infoEmpleado.append('foto', foto);

$.ajax({

url: '../controller/empleadoControlador.php',

type: 'POST',

data: infoEmpleado,

contentType: false,

processData: false,

success: function(respuestaAjax) {

console.log(respuestaAjax);

if (respuestaAjax == 1) {

console.log('Exitoso');

} else {

console.log('Error');

})

}

});

En el controlador se recoge de la siguiente manera:

if (isset($_POST['datos'])) {

parse_str($_POST["datos"], $datos);

if($datos && $datos['accion'] == 'crearEmpleado') {

$empleado = new Empleado();

if (isset($_FILES['foto'])){

$nombreArchivo=$_FILES['foto']['name'];

$empleado->cargarFoto($nombreArchivo);//en mi caso, esta función guarda la foto.

$foto = $empleado->setFoto($nombreArchivo);

}else {

$foto = $empleado->setFoto(null);

}

$nombre = $empleado->setNombre($datos['nombre']);

$apellidos = $empleado->setApellidos($datos['apellidos']);

$email = $empleado->setEmail($datos['email']);

$empDao->insertarEmpleado($empleado);

}

En el dao, además de insertar los datos en la BBDD, creo la respuesta que recoge AJAX:

public function insertarEmpleado($empleado)

{

$stmt = $this->db->prepare("INSERT INTO empleado (nombre, apellidos, email, foto) VALUES

(?, ?, ?, ?)");

$stmt->bindValue(1, $empleado->getNombre());

$stmt->bindValue(2, $empleado->getApellidos());

$stmt->bindValue(3, $empleado->getEmail());

$stmt->bindValue(4, $empleado->getFoto());

$resultadoRegistro = $stmt->execute();

if ($resultadoRegistro > 0) {

echo 1; //respuesta 1: AJAX devuelve 'Exitoso' en la consola.

} else {

echo 0; //respuesta 0: AJAX devuelve 'Error' en la consola.

}

////////////////////////////////

<input type="text" class="form-control" id="name" name="name" placeholder="Enter

name" required />

</div>

<label for="email">EMAIL</label>

<input type="email" class="form-control" id="email" name="email" placeholder="Enter

email" required />

</div>

</div>

</form>

////////////////////////

<input type="text" class="form-control" id="name" name="name" placeholder="Enter

name" required />

</div>

<label for="email">EMAIL</label>

<input type="email" class="form-control" id="email" name="email" placeholder="Enter

email" required />

</div>

</div>

</form>...

$(document).ready(function(e){

$("#fupForm").on('submit', function(e){

e.preventDefault();

$.ajax({

type: 'POST',

url: 'submit.php',

data: new FormData(this),

contentType: false,

cache: false,

processData:false,

beforeSend: function(){

$('.submitBtn').attr("disabled","disabled");

$('#fupForm').css("opacity",".5");

success: function(msg){

$('.statusMsg').html('');

if(msg == 'ok'){

$('#fupForm')[0].reset();

$('.statusMsg').html('<span style="font-size:18px;color:#34A853">Form

data submitted successfully.</span>');

}else{

$('.statusMsg').html('<span style="font-size:18px;color:#EA4335">Some

problem occurred, please try again.</span>');

}

$('#fupForm').css("opacity","");

$(".submitBtn").removeAttr("disabled");

}

});

//file type validation

$("#file").change(function() {

var file = this.files[0];

var imagefile = file.type;

var match= ["image/jpeg","image/png","image/jpg"];

if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))){

alert('Please select a valid image file (JPEG/JPG/PNG).');

$("#file").val('');

return false;

}

});

</script>

<?php

if(!empty($_POST['name']) || !empty($_POST['email']) || !empty($_FILES['file']['name'])){

$uploadedFile = '';

if(!empty($_FILES["file"]["type"])){

$fileName = time().'_'.$_FILES['file']['name'];

$valid_extensions = array("jpeg", "jpg", "png");

$temporary = explode(".", $_FILES["file"]["name"]);

$file_extension = end($temporary);

if((($_FILES["hard_file"]["type"] == "image/png") || ($_FILES["file"]["type"] ==

"image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")) && in_array($file_extension,

$valid_extensions)){

$sourcePath = $_FILES['file']['tmp_name'];

$targetPath = "uploads/".$fileName;

if(move_uploaded_file($sourcePath,$targetPath)){

$uploadedFile = $fileName;

}

$name = $_POST['name'];

$email = $_POST['email'];

//include database configuration file

include_once 'dbConfig.php';

//insert form data in the database

$insert = $db->query("INSERT form_data (name,email,file_name) VALUES ('".$name."','".

$email."','".$uploadedFile."')");

echo $insert?'ok':'err';

}

////////////////////////////////////

<p class="card-text">Sube una imagen...</p>

<label for="image">Nueva imagen</label>

</div>

</div>

</form>

<?php

if (($_FILES["file"]["type"] == "image/pjpeg")

|| ($_FILES["file"]["type"] == "image/jpeg")

|| ($_FILES["file"]["type"] == "image/png")

|| ($_FILES["file"]["type"] == "image/gif")) {

if (move_uploaded_file($_FILES["file"]["tmp_name"], "images/".$_FILES['file']['name']))

{

//more code here...

echo "images/".$_FILES['file']['name'];

} else {

echo 0;

}

} else {

echo 0;

}

$(document).ready(function() {

$(".upload").on('click', function() {

var formData = new FormData();

var files = $('#image')[0].files[0];

formData.append('file',files);

$.ajax({

url: 'upload.php',

type: 'post',

data: formData,

contentType: false,

processData: false,

success: function(response) {

if (response != 0) {

$(".card-img-top").attr("src", response);

} else {

alert('Formato de imagen incorrecto.');

}

});

return false;

});

</script>

//////////////////////////////

Código HTML

El código HTML es muy simple, ya que en este caso sólo se trata de un ejemplo.

</div>

<form method="post" action="#" enctype="multipart/form-

data">

<img class="card-img-top"

src="https://via.placeholder.com/150">

<label for="image">Upload

image</label>

<input type="file"

class="form-control-file mt-2" name="image" id="image">

</div>

</form>

</div>

Código Javascript

Con jQuery detectaremos cuándo el usuario selecciona una imagen y ejecutaremos la llamada

Ajax contra el servidor.

Si la respuesta comienza por la cadena [ERROR] sabremos que la imagen no se ha subido

correctamente. Por el contrario, recibiremos la url de la imagen que acabamos de subir.

$(document).ready(function() {

$("#image").on('change', function() {

$(".announce").html('<div class="alert alert-

info">Process...</div>');

var formData = new FormData();

var files = $('#image')[0].files[0];

formData.append('file',files);

$.ajax({

url: 'upload.php',

type: 'post',

data: formData,

contentType: false,

processData: false,

async: false,

success: function(response) {

if (response.slice(0, 7) != "[ERROR]") {

$(".announce").html('<div

class="alert alert-success">Uploaded OK</div>');

$(".card-img-top").attr("src",

response);

} else {

var error_str = response.replace

("[ERROR]", "");

$(".announce").html('<div

class="alert alert-danger">An error has ocurred: <b>' + error_str + '</b></div>');

}

});

return false;

});

Código PHP

En nuestro código PHP realizaremos las validaciones necesarias para poder ejecutar la subida

y devolver una respuesta al cliente.

Tendremos un directorio llamado images en el que se almacenarán las imágenes. En este

ejemplo no se comprueba si la imagen ya existe.

<?php

// Definitions

$accept_types = array(

"image/pjpeg",

"image/jpeg",

"image/png",

"image/gif",

);

$to_path = "images";

// Check directory

if(!is_dir($to_path)){

echo "[ERROR]Internal directory not exists";

return;

}

// Check file type

if(!in_array($_FILES["file"]["type"], $accept_types)){

echo "[ERROR]The file type is not accepted";

return;

}

// Move the file

if (move_uploaded_file($_FILES["file"]["tmp_name"], $to_path . "/" . $_FILES['file']

['name'])) {

echo $to_path."/".$_FILES['file']['name'];

return;

}

// Default error

echo "[ERROR]Move image failed!";

//////////////////////////////////////

copy($_FILES['valorCaja4' ]['tmp_name'],"images/ImgProductos/".$ID);

move_uploaded_file($_FILES['valorCaja4']['tmp_name'],"images/ImgProductos/".$ID);

<h1>Registrar Producto</h1>

<input name="unidadescaja" id="valor1" type="number"

placeholder="Unidades por caja"><br/><br/>

<input name="precio" id="valor2" type="number" placeholder="Precio"

step=".01"><span> €</span><br/><br/>

<textarea name="descripcion" id="valor3" style="width:70%;height:200px;"

></textarea><br/><br/>

<input type="file" name="imagen" id="valor4"

accept="image/jpeg"><br/><br/>

<button type="submit" id="guardarRegistro">Registrar</button>

</form>

</div>

var precio = $('#valor2').val(); // obtienes el valor del input

var descripcion = $('#valor3').val();// obtienes el valor del input

var imagen = $("#valor4")[0].files[0]; // obtienes el archivo cargado en el input

console.log("imagen", imagen);

// Obviamente aqui debes hacer validaciones para que no vengan vacios los campos...

// que vengan solo los tipos de archivo que quieres almacenar...

// No puedes permitir que almacenen cualquier puedes hacer que tu sitio sea vulnerable

if (unidades == '' || precio == '' || descripcion == '' || imagen == '') {

$('#ErroresRegistro').html(`<p style="background:red; color:white; margin-top:10px;

padding:10px;">Todos los campos son requeridos</p>`);

} else if (imagen["type"] != "image/jpeg") {

$('#ErroresRegistro').html(`<p style="background:red; color:white; margin-top:10px;

padding:10px;">Solo se permiten archivos en formato JPG.</p>`);

} else {

$('#ErroresRegistro').html('');

var datos = new FormData(); //

https://developer.mozilla.org/es/docs/Web/Guide/Usando_Objetos_FormData

datos.append('valorCaja1', unidades)

datos.append('valorCaja2', precio)

datos.append('valorCaja3', descripcion)

datos.append('valorCaja4', imagen)

$.ajax({

url: "insertarproducto.php",

method: "POST",

data: datos,

cache: false,

contentType: false,

processData: false,

beforeSend: function () {

$("#ErroresRegistro").html(`<p style="background:orange; color:white;

margin-top:10px; padding:10px;">Procesando, espere por favor...</p>`);

success: function (response) { //una vez que el archivo recibe el request lo

procesa y lo devuelve

$("#ErroresRegistro").html(response);

}

})

}

})

<?php

// AJAX

if ($_SERVER['REQUEST_METHOD'] == 'POST') { // Valida que solo se pueda acceder al archivo

si es una peticion tipo POST

if ($_FILES['valorCaja4']['name'] != '' && !empty($_FILES['valorCaja4'])) { // Valida

que no venga vacia la imagen...

// Haz más validaciones lado servidor que sea el formato que vas a aceptar como en

el javascript JPG o el que tu desees...

if ($_FILES['valorCaja4']['type'] != 'image/jpeg') {

echo '<p style="background:red; color:white; margin-top:10px;

padding:10px;">Solo se permiten archivos en formato JPG.</p>';

} else {

// Valida los datos des inputs

// Tú SQL lo mandas aquí de preferencia con PDO

// Luego de que alamacenes los datos mandas la imagen al directorio

$id = 1; // esto debe de venir de tu base de datos, lo pongo aqui solo para

pruebaimages/ImgProductos/'.$ID

$nombre_img = 'imagen_producto_' .$id . '.jpg';

// las carpetas deben estar creadas si no es asi te dara un error, si no estan

creadas indaga sobre como crear directorios en php.

// ruta final de la imagen. Esta deberias de guardarla en un campo de tu BD para

poderla mostrar en algun otro lugar

$destino = 'images/ImgProductos/'.$nombre_img;

move_uploaded_file($_FILES['valorCaja4']['tmp_name'], $destino);

echo '<p style="background:green; color:white; margin-top:10px;

padding:10px;">Se han almacenado los datos</p>';

}

///////////////////////////////////////////////////////////

titulo pelicula: <input type="text" id="atitulo" name="titulo" value="" required/><br>

director: <input type="text" id="adirector" value="" required /><br>

genero: <select id="agenero">

<?php

$consulta = "SELECT idGenero, genero

FROM genero";

$res = $lnk->query($consulta);

while ($fila2 = $res->fetch_object()){?>

<option value="<?= $fila2->idGenero?>"><?= $fila2->genero?></option>

<?php } ?>

</select>

<br>

fecha: <input type="text" id="afecha" value="" required/>

imagen <input type="file" id="afile" name="afile" required/>

</form>

<?php

$archivo = $_FILES['afile'];

if ($_FILES['afile']['error'] == 0) {

// Donde se va a guardar el fichero (la imagen)

move_uploaded_file($_FILES['afile']['tmp_name'], 'uploads/'.$_FILES['afile']

['name']);

}

$titulo = $_POST['titulo'];

$director = $_POST['director'];

$fecha = $_POST['fecha'];

$genero = $_POST['idgenero'];

echo $titulo , $director, $fecha, $genero;

"guardar": function() {

var file_data = $('#afile').prop('files')[0];

var form_data = new FormData();

form_data.append('afile', file_data);

form_data.append('titulo', $("#atitulo").val());

form_data.append('director', $("#adirector").val());

form_data.append('fecha', $("#afecha").val());

form_data.append('idgenero', $("#agenero").val());

form_data.append('operacion', "nuevo");

alert(form_data);

$.ajax({

url: 'peli.php',

dataType: 'text',

data: form_data,

type: 'post',

processData:false,

cache:false,

contentType: false,

success: function(data){

$("#listar").html(data);

}

});

} //Fin de la funcion "guardar"

if (isset($_FILES)) { // Verificar si se esta enviando algun fichero

if ($_FILES['afile']['error'] > 0) {

// Donde se va a guardar el fichero (la imagen)

move_uploaded_file($_FILES['afile']['tmp_name'], 'uploads/' . $_FILES['file']

['name']);

}

$(document).ready(function() {

// Obtener imagen seleccionada

var archivo = null;

$('#imagen').on('change', function(event) {

archivos = event.target.files;

archivo = archivos[0];

});

// Enviar formulario

$('#enviar').on('click touchend', function() {

// Objeto FormData para almacenar los datos

var datos = new FormData();

// Guardar la informacion del archivo para enviar

datos.append("imagen", archivo);

datos.append("nombre", $('#nombre').val());

jQuery.ajax({

url: "https://tiendasdigitales.net/peticion.php",

type: 'POST',

cache: false,

data: datos,

dataType: 'html',

contentType: false, // Importante

processData: false, // Importante

success: function(data, textStatus, jqXHR) {

// Exito

}

});

</form>

/////////////////////////////////////////index.php

<!DOCTYPE HTML>

<html>

<head>

$(function(){

$("input[name='file']").on("change", function(){

var formData = new FormData($("#formulario")[0]);

var ruta = "imagen-ajax.php";

$.ajax({

url: ruta,

type: "POST",

data: formData,

contentType: false,

processData: false,

success: function(datos)

{

$("#respuesta").html(datos);

}

});

</script>

</head>

<body>

Subir imagen: <input type="file" name="file">

</form>

</body>

</html>

ajax-imagen.php

<?php

if (isset($_FILES["file"]))

{

$file = $_FILES["file"];

$nombre = $file["name"];

$tipo = $file["type"];

$ruta_provisional = $file["tmp_name"];

$size = $file["size"];

$dimensiones = getimagesize($ruta_provisional);

$width = $dimensiones[0];

$height = $dimensiones[1];

$carpeta = "imagenes/";

if ($tipo != 'image/jpg' && $tipo != 'image/jpeg' && $tipo != 'image/png' && $tipo !=

'image/gif')

{

echo "Error, el archivo no es una imagen";

}

else if ($size > 1024*1024)

{

echo "Error, el tamaño máximo permitido es un 1MB";

}

else if ($width > 500 || $height > 500)

{

echo "Error la anchura y la altura maxima permitida es 500px";

}

else if($width < 60 || $height < 60)

{

echo "Error la anchura y la altura mínima permitida es 60px";

}

else

{

$src = $carpeta.$nombre;

move_uploaded_file($ruta_provisional, $src);

echo "<img src='$src'>";

}

////////////////////////////////////////////////////////////

<!DOCTYPE html>

<html>

<head>

<title> Subida y precarga ajax </title>

function subirArchivos() {

$("#archivo").upload('subir_archivo.php',

{

nombre_archivo: $("#nombre_archivo").val()

function(respuesta) {

//Subida finalizada.

$("#barra_de_progreso").val(0);

if (respuesta === 1) {

mostrarRespuesta('El archivo ha sido subido correctamente.', true);

$("#nombre_archivo, #archivo").val('');

} else {

mostrarRespuesta('El archivo NO se ha podido subir.', false);

}

mostrarArchivos();

}, function(progreso, valor) {

//Barra de progreso.

$("#barra_de_progreso").val(valor);

});

}

function eliminarArchivos(archivo) {

$.ajax({

url: 'eliminar_archivo.php',

type: 'POST',

timeout: 10000,

data: {archivo: archivo},

error: function() {

mostrarRespuesta('Error al intentar eliminar el archivo.', false);

success: function(respuesta) {

if (respuesta == 1) {

mostrarRespuesta('El archivo ha sido eliminado.', true);

} else {

mostrarRespuesta('Error al intentar eliminar el archivo.', false);

}

mostrarArchivos();

}

});

}

function mostrarArchivos() {

$.ajax({

url: 'mostrar_archivos.php',

dataType: 'JSON',

success: function(respuesta) {

if (respuesta) {

var html = '';

for (var i = 0; i < respuesta.length; i++) {

if (respuesta[i] != undefined) {

html += '<div class="row"> <span class="col-lg-2"> ' + respuesta[i] + '

</span> <div class="col-lg-2"> <a class="eliminar_archivo btn btn-danger"

href="javascript:void(0);"> Eliminar </a> </div> </div> <hr />';

}

$("#archivos_subidos").html(html);

}

});

}

function mostrarRespuesta(mensaje, ok){

$("#respuesta").removeClass('alert-success').removeClass('alert-danger').html

(mensaje);

if(ok){

$("#respuesta").addClass('alert-success');

}else{

$("#respuesta").addClass('alert-danger');

}

$(document).ready(function() {

mostrarArchivos();

$("#boton_subir").on('click', function() {

subirArchivos();

});

$("#archivos_subidos").on('click', '.eliminar_archivo', function() {

var archivo = $(this).parents('.row').eq(0).find('span').text();

archivo = $.trim(archivo);

eliminarArchivos(archivo);

});

</script>

</head>

<body>

<h1> Subida y precarga ajax </h1>

<label> Nombre el archivo: </label>

</div>

</div>

</div>

<hr />

<input type="submit" id="boton_subir" value="Subir" class="btn btn-success"

</div>

</div>

</form>

<hr />

</div>

</body>

</html>

<?php

if (isset($_FILES['archivo'])) {

$archivo = $_FILES['archivo'];

$extension = pathinfo($archivo['name'], PATHINFO_EXTENSION);

$time = time();

$nombre = "{$_POST['nombre_archivo']}_$time.$extension";

if (move_uploaded_file($archivo['tmp_name'], "archivos_subidos/$nombre")) {

echo 1;

} else {

echo 0;

}

<?php

$directorio_escaneado = scandir('archivos_subidos');

$archivos = array();

foreach ($directorio_escaneado as $item) {

if ($item != '.' and $item != '..') {

$archivos[] = $item;

}

echo json_encode($archivos);

Y otro llamado eliminar_archivo.php:

<?php

if (isset($_POST['archivo'])) {

$archivo = $_POST['archivo'];

if (file_exists("archivos_subidos/$archivo")) {

unlink("archivos_subidos/$archivo");

echo 1;

} else {

echo 0;

}

miscodesdelchatgpt.blogspot.com

SUBIR FOTO CON JQUERY PHP MYQL

Comentarios

Publicar un comentario