UPDATE FOTO CARPETA Y FORM VERSION 2 FETCH API JSON document.getElementById

haz codigo que actualize foto en carpeta y base dato por form php pdo mysql fetch javascript puro con api json metodo post body: JSON.stringify tener encuenta si el usuario no sube foto que conserve la que tenia . hacer con campo nombre y campo precio campo foto

Claro, aquí te dejo un ejemplo de cómo actualizar la foto en una carpeta y una base de datos utilizando PHP PDO MySQL y JavaScript puro con una API JSON mediante el método POST con el cuerpo de la solicitud en formato JSON:

HTML:

python

Copy code

</form>

JavaScript:

javascript

Copy code

const form = document.querySelector('#form');

form.addEventListener('submit', (e) => {

e.preventDefault();

const formData = new FormData(form);

const json = {};

formData.forEach((value, key) => { json[key] = value; });

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

});

PHP (guardar.php):

php

Copy code

<?php

$pdo = new PDO('mysql:host=localhost;dbname=nombre_de_la_base_de_datos', 'usuario', 'contraseña');

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$nombre = $_POST['nombre'] ?? '';

$precio = $_POST['precio'] ?? '';

$foto = $_FILES['foto'] ?? null;

if ($foto && $foto['error'] === UPLOAD_ERR_OK) {

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

$nombreArchivo = uniqid() . '.' . $extension;

move_uploaded_file($foto['tmp_name'], 'ruta/a/la/carpeta/' . $nombreArchivo);

} else {

$nombreArchivo = null;

}

$stmt = $pdo->prepare('UPDATE tabla SET nombre = :nombre, precio = :precio, foto = :foto WHERE id = :id');

$stmt->bindValue(':nombre', $nombre);

$stmt->bindValue(':precio', $precio);

$stmt->bindValue(':foto', $nombreArchivo);

$stmt->bindValue(':id', 1); // Cambiar por el ID correspondiente

$stmt->execute();

$response = array('success' => true);

echo json_encode($response);

Ten en cuenta que el código anterior solo es un ejemplo y que debes adaptarlo a tus necesidades. Además, es importante validar los datos del formulario y sanitizarlos antes de usarlos en consultas SQL para evitar ataques de inyección de código.

jose fernandez

const formData = new FormData(form); hazlo de otra forma

Claro, aquí te muestro otra forma de obtener los datos del formulario sin usar FormData:

HTML:

python

Copy code

</form>

JavaScript:

javascript

Copy code

const form = document.querySelector('#form');

form.addEventListener('submit', (e) => {

e.preventDefault();

const json = {};

Array.from(form.elements).forEach((element) => {

if (element.name && !element.disabled) {

if (element.type === 'file') {

json[element.name] = element.files[0] || null;

} else {

json[element.name] = element.value || '';

}

});

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

});

En este caso, en lugar de crear un objeto FormData, se itera sobre los elementos del formulario y se crea un objeto json con los datos de cada elemento. Si el elemento es un campo de tipo file, se obtiene el primer archivo seleccionado o null si no se seleccionó ninguno.

Es importante tener en cuenta que en este método no se incluyen los campos de tipo checkbox que no están marcados, por lo que si tienes campos de ese tipo debes ajustar el código para incluirlos en el objeto json aunque no estén marcados.

jose fernandez

Array.from(form.elements).forEach((element) => { hazlo con document.getelementbyid

Claro, aquí te muestro cómo hacerlo con document.getElementById en lugar de form.elements:

HTML:

python

Copy code

<form>

</form>

JavaScript:

javascript

Copy code

const form = document.querySelector('form');

const nombreInput = document.getElementById('nombre');

const precioInput = document.getElementById('precio');

const fotoInput = document.getElementById('foto');

form.addEventListener('submit', (e) => {

e.preventDefault();

const json = {};

json['nombre'] = nombreInput.value || '';

json['precio'] = precioInput.value || '';

json['foto'] = fotoInput.files[0] || null;

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

});

En este caso, se obtienen los elementos del formulario mediante document.getElementById y se almacenan en variables separadas. Luego, en el evento submit, se crea el objeto json con los valores de cada variable.

Ten en cuenta que para este ejemplo se utiliza un formulario con elementos identificados mediante el atributo id. Si en tu caso necesitas utilizar elementos identificados mediante otros atributos, como name o class, debes ajustar el código en consecuencia.

jose fernandez

luego cargar en una tabla para ver los registros actualizados hacer con fetch api json metodo post php pdo

Claro, aquí te muestro cómo cargar los registros actualizados en una tabla utilizando fetch, API JSON, POST, PHP y PDO.

Primero, asumiremos que tienes una tabla llamada productos en tu base de datos MySQL con las siguientes columnas: id, nombre, precio, y foto.

HTML:

php

Copy code

<thead>

<tr>

<th>Nombre</th>

<th>Precio</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

JavaScript:

javascript

Copy code

function cargarTabla() {

fetch('/obtener_productos.php')

.then(response => response.json())

.then(data => {

const tablaBody = document.querySelector('#tabla tbody');

tablaBody.innerHTML = '';

data.forEach(producto => {

const fila = document.createElement('tr');

fila.innerHTML = `

<td>${producto.id}</td>

<td>${producto.nombre}</td>

<td>${producto.precio}</td>

<td>${producto.foto}</td>

tablaBody.appendChild(fila);

});

})

.catch(error => console.error(error));

}

cargarTabla();

PHP (obtener_productos.php):

php

Copy code

<?php

$pdo = new PDO('mysql:host=localhost;dbname=nombre_de_tu_base_de_datos', 'usuario', 'contraseña');

$query = $pdo->query('SELECT * FROM productos');

$productos = $query->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($productos);

En este caso, se utiliza fetch para hacer una petición POST a un archivo PHP (obtener_productos.php) que se encarga de obtener los datos de la tabla productos en la base de datos y devolverlos en formato JSON. Luego, en el código JavaScript, se utiliza forEach para iterar sobre los productos obtenidos y crear una fila en la tabla HTML para cada uno.

Es importante que adaptes el código PHP a tu configuración de base de datos, incluyendo el nombre de la base de datos, el usuario y la contraseña.

Ten en cuenta que el código PHP solo hace una consulta a la base de datos y devuelve todos los registros. Si necesitas filtrar los registros o mostrar solo algunos de ellos, debes ajustar el código PHP en consecuencia.

jose fernandez

<form> en formulario cargar con el id y con datos de ejemplo

Claro, aquí te muestro un ejemplo completo con el formulario en HTML y algunos datos de ejemplo para que puedas probar el código:

HTML:

php

Copy code

</form>

<thead>

<tr>

<th>Nombre</th>

<th>Precio</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

JavaScript:

less

Copy code

const form = document.querySelector('#formulario');

const nombreInput = document.getElementById('nombre');

const precioInput = document.getElementById('precio');

const fotoInput = document.getElementById('foto');

const tablaBody = document.querySelector('#tabla tbody');

form.addEventListener('submit', (e) => {

e.preventDefault();

const json = {};

json['nombre'] = nombreInput.value || '';

json['precio'] = precioInput.value || '';

json['foto'] = fotoInput.files[0] || null;

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => {

tablaBody.innerHTML = '';

data.forEach(producto => {

const fila = document.createElement('tr');

fila.innerHTML = `

<td>${producto.id}</td>

<td>${producto.nombre}</td>

<td>${producto.precio}</td>

<td>${producto.foto}</td>

tablaBody.appendChild(fila);

});

})

.catch(error => console.error(error));

});

// Datos de ejemplo

tablaBody.innerHTML = `

<tr>

<td>Producto 1</td>

<td>imagen.jpg</td>

</tr>

<tr>

<td>Producto 2</td>

<td>imagen2.jpg</td>

</tr>

En este ejemplo, se utiliza el id del formulario para seleccionarlo con document.querySelector y se obtienen los elementos del formulario mediante document.getElementById. También se utiliza document.querySelector para seleccionar la tabla y su tbody.

Ten en cuenta que los datos de ejemplo se agregan manualmente a la tabla en la última línea de JavaScript, pero en tu caso estos datos deberán obtenerse de la base de datos a través de fetch como se muestra en la respuesta anterior.

jose fernandez

agregar al formulario <input type="hidden" id="id"

¡Claro! Puedes agregar el input de tipo hidden en el formulario de la siguiente manera:

python

Copy code

</form>

Como puedes ver, se agrega un nuevo input con el id "id" y el value vacío. Luego, puedes obtener su valor y enviarlo junto con los demás datos en la solicitud fetch.

En el código JavaScript, podrías agregar lo siguiente para incluir el valor del input de tipo hidden en el objeto JSON que se envía al servidor:

less

Copy code

const form = document.querySelector('#formulario');

const nombreInput = document.getElementById('nombre');

const precioInput = document.getElementById('precio');

const fotoInput = document.getElementById('foto');

const idInput = document.getElementById('id'); // Obtener el input de tipo "hidden"

const tablaBody = document.querySelector('#tabla tbody');

form.addEventListener('submit', (e) => {

e.preventDefault();

const json = {};

json['id'] = idInput.value || ''; // Incluir el valor del input "id"

json['nombre'] = nombreInput.value || '';

json['precio'] = precioInput.value || '';

json['foto'] = fotoInput.files[0] || null;

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => {

tablaBody.innerHTML = '';

data.forEach(producto => {

const fila = document.createElement('tr');

fila.innerHTML = `

<td>${producto.id}</td>

<td>${producto.nombre}</td>

<td>${producto.precio}</td>

<td>${producto.foto}</td>

tablaBody.appendChild(fila);

});

})

.catch(error => console.error(error));

});

// Datos de ejemplo

tablaBody.innerHTML = `

<tr>

<td>Producto 1</td>

<td>imagen.jpg</td>

</tr>

<tr>

<td>Producto 2</td>

<td>imagen2.jpg</td>

</tr>

De esta manera, el valor del input de tipo hidden se incluirá en el objeto JSON que se envía al servidor junto con los demás datos.

jose fernandez

agregar al formulario un etiqueta img con una foto cargada de ejemplo

¡Claro! Puedes agregar una etiqueta img con una foto cargada de ejemplo de la siguiente manera:

python

Copy code

</form>

En este caso, se agrega una nueva etiqueta img con el id "foto-preview" y la imagen de ejemplo se carga en ella mediante el atributo src. También se establece un ancho de 100 píxeles para que no ocupe demasiado espacio.

Luego, puedes agregar el siguiente código JavaScript para mostrar la imagen seleccionada por el usuario en la vista previa:

javascript

Copy code

const form = document.querySelector('#formulario');

const nombreInput = document.getElementById('nombre');

const precioInput = document.getElementById('precio');

const fotoInput = document.getElementById('foto');

const idInput = document.getElementById('id');

const fotoPreview = document.getElementById('foto-preview'); // Obtener la etiqueta "img"

const tablaBody = document.querySelector('#tabla tbody');

form.addEventListener('submit', (e) => {

e.preventDefault();

const json = {};

json['id'] = idInput.value || '';

json['nombre'] = nombreInput.value || '';

json['precio'] = precioInput.value || '';

json['foto'] = fotoInput.files[0] || null;

// Mostrar la imagen seleccionada en la etiqueta "img"

if (fotoInput.files && fotoInput.files[0]) {

const reader = new FileReader();

reader.onload = (e) => {

fotoPreview.src = e.target.result;

};

reader.readAsDataURL(fotoInput.files[0]);

}

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => {

tablaBody.innerHTML = '';

data.forEach(producto => {

const fila = document.createElement('tr');

fila.innerHTML = `

<td>${producto.id}</td>

<td>${producto.nombre}</td>

<td>${producto.precio}</td>

<td>${producto.foto}</td>

tablaBody.appendChild(fila);

});

})

.catch(error => console.error(error));

});

// Datos de ejemplo

tablaBody.innerHTML = `

<tr>

<td>Producto 1</td>

<td>imagen.jpg</td>

</tr>

<tr>

<td>Producto 2</td>

<td>imagen2.jpg</td>

</tr>

De esta manera, al seleccionar una imagen mediante el input de tipo file, se muestra en la etiqueta img de vista previa mediante el objeto FileReader.

miscodesdelchatgpt.blogspot.com

UPDATE FOTO CARPETA Y FORM VERSION 2 FETCH API JSON document.getElementById

Comentarios

Publicar un comentario

Entradas populares de este blog

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

CONVERTIR IMÁGEN JPG O PNG A WEBP CON PHP DE FORMA SIMPLE