CARGAR VISTA PREVIA DE FOTO A SUBIR

 

<!-- HTML code for a form that allows the user to upload an image file -->

<form action="upload.php" method="post" enctype="multipart/form-data">

  <label for="photo">Select a photo to upload:</label>

  <input type="file" id="photo" name="photo">

  <input type="submit" value="Upload">

</form>

 

<!-- JavaScript code to display the selected image in an <img> tag -->

<script>

  // Select the <img> tag by its ID

  const img = document.querySelector('#myImage');

 

  // Set the src attribute to the selected file

  const photoInput = document.querySelector('#photo');

  photoInput.addEventListener('change', () => {

    const file = photoInput.files[0];

    const reader = new FileReader();

    reader.onload = () => {

      img.src = reader.result;

    }

    reader.readAsDataURL(file);

  });

</script>

In the PHP script that handles the form submission (upload.php), you can use $_FILES to move the uploaded file to a permanent location on the server. Here's an example of how you could do that:

 

php

Copy code

<?php

// Get the file's temporary location on the server

$photo_tmp = $_FILES['photo']['tmp_name'];

 

// Get the file's original name

$photo_name = $_FILES['photo']['name'];

 

// Create a new filename by appending a timestamp to the original name

$photo_newname = time() . '_' . $photo_name;

 

// Specify the destination directory for the uploaded file

$photo_dest = 'uploads/' . $photo_newname;

 

// Move the file from its temporary location to the destination directory

move_uploaded_file($photo_tmp, $photo_dest);

 

// Save the file path to the database or perform other actions as needed

?>

Note that this is a simple example and you'll want to add more error checking and validation to your code to make sure that the file is a valid image and that it's not too large, for example.

$_FILES document.querySelector img photo label vanilla js

To upload an image file and display it on a webpage using vanilla JavaScript, you can use FormData to create a new FormData object that contains the selected file, and then send it to the server using an AJAX request.

 

Here's an example of how you could do that:

 

html

Copy code

<!-- HTML code for a form that allows the user to upload an image file -->

<form>

  <label for="photo">Select a photo to upload:</label>

  <input type="file" id="photo" name="photo">

  <input type="submit" value="Upload">

</form>

 

<!-- HTML code for an <img> tag that will display the selected image -->

<img id="image-preview" src="#" alt="">

 

<!-- JavaScript code to handle the form submission and display the selected image -->

<script>

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

  const imagePreview = document.querySelector('#image-preview');

 

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

    event.preventDefault(); // Prevent the default form submission

   

    // Create a new FormData object that contains the selected file

    const formData = new FormData();

    formData.append('photo', document.querySelector('#photo').files[0]);

   

    // Send the FormData object to the server using an AJAX request

    const xhr = new XMLHttpRequest();

    xhr.open('POST', 'upload.php');

    xhr.onload = () => {

      if (xhr.status === 200) {

        // If the upload was successful, display the selected image

        imagePreview.src = URL.createObjectURL(formData.get('photo'));

      } else {

        // If there was an error, display a message to the user

        alert('There was an error uploading the file.');

      }

    };

    xhr.send(formData);

  });

</script>

In the PHP script that handles the form submission (upload.php), you can use $_FILES to move the uploaded file to a permanent location on the server. Here's an example of how you could do that:

 

php

Copy code

<?php

// Get the file's temporary location on the server

$photo_tmp = $_FILES['photo']['tmp_name'];

 

// Get the file's original name

$photo_name = $_FILES['photo']['name'];

 

// Create a new filename by appending a timestamp to the original name

$photo_newname = time() . '_' . $photo_name;

 

// Specify the destination directory for the uploaded file

$photo_dest = 'uploads/' . $photo_newname;

 

// Move the file from its temporary location to the destination directory

move_uploaded_file($photo_tmp, $photo_dest);

 

// Save the file path to the database or perform other actions as needed

?>

Note that this is a simple example and you'll want to add more error checking and validation to your code to make sure that the file is a valid image and that it's not too large, for example.


document.getElementById  img photo label vanilla js capture url

To capture the URL of an image that has been uploaded by the user using a file input field and display it in an <img> element on the page using vanilla JavaScript, you can use URL.createObjectURL() to create a URL for the selected file and set it as the src attribute of the <img> element.

 

Here's an example of how you could do that:

 

html

Copy code

<!-- HTML code for a form that allows the user to upload an image file -->

<form>

  <label for="photo">Select a photo to upload:</label>

  <input type="file" id="photo" name="photo">

  <input type="submit" value="Upload">

</form>

 

<!-- HTML code for an <img> tag that will display the selected image -->

<img id="image-preview" src="#" alt="">

 

<!-- JavaScript code to handle the form submission and display the selected image -->

<script>

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

  const imagePreview = document.querySelector('#image-preview');

 

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

    event.preventDefault(); // Prevent the default form submission

   

    // Get the selected file and create a URL for it

    const photo = document.querySelector('#photo').files[0];

    const photoUrl = URL.createObjectURL(photo);

   

    // Set the URL as the src attribute of the <img> element

    imagePreview.src = photoUrl;

  });

</script>

In the PHP script that handles the form submission, you can use $_FILES to move the uploaded file to a permanent location on the server and store the file path in a database or perform other actions as needed.


Comentarios

Publicar un comentario

Entradas populares de este blog

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

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

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

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

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

ChatGPT Puedes convertir imágenes de formato JPG o PNG a WebP utilizando la biblioteca GD en PHP. Aquí te muestro un ejemplo simple de cómo hacerlo: php Copy code <?php // Ruta de la imagen de entrada (puede ser JPG o PNG) $imagen_entrada = 'imagen.jpg'; // Ruta de la imagen de salida en formato WebP $imagen_salida = 'imagen.webp'; // Cargar la imagen de entrada $imagen = imagecreatefromstring(file_get_contents($imagen_entrada)); // Verificar si la carga de la imagen fue exitosa if ($imagen !== false) {     // Guardar la imagen en formato WebP     imagewebp($imagen, $imagen_salida);     // Liberar la memoria utilizada por la imagen cargada     imagedestroy($imagen);     echo 'La imagen se ha convertido a formato WebP correctamente.'; } else {     echo 'No se pudo cargar la imagen de entrada.'; } ?> Asegúrate de que la extensión PHP GD esté habilitada en tu servidor. Además, si necesitas ajustar la calidad de la imagen Web...
Leer más