Hacer preview de una imagen antes de subirla utilizando jQuery

La característica de preview permite a los usuarios ver la imagen concreta que acaban de subir, justo antes de hacerlo. Es una función muy habitual en portales que permiten subir contenido a sus plataformas. Ayuda al usuario a ver el archivo seleccionado y cambiar la imagen, si es necesario, justo antes de subirla. Para la perspectiva del usuario, es muy útil subir la imagen perfecta o el fichero sin tener que recargar la página una y otra vez.

Puedes añadir la opción de preview en la subida de ficheros de tu web utilizando Javascript y jQuery. En este tutorial, te indicaremos qué código Javascript y jQuery introducir para llevar a cabo esta característica. También, te proporcionaremos un modo de previsualizar cualquier tipo de fichero antes de subirlo.

Javascript

Este script utilizará algunas funciones de jQuery, por lo que, lo primero es incluir la propia librería.

<script src="jquery.min.js"></script>

Utilizaremos FileReader de Javascript para leer el contenido del fichero mediante la función filePreview(). Una vez hemos cargado el contenido del fichero, previsualizaremos el render de la imagen debajo del formulario de subida de ficheros.

function filePreview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#uploadForm + img').remove();
            $('#uploadForm').after('<img src="'+e.target.result+'" width="450" height="300"/>');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

Si quieres previsualizar cualquier tipo de archivo, utiliza el tag <embed> en lugar del tag <img>. Coloca el siguiente código en el evento reader.onload y elimina el código existente.

$('#uploadForm + embed').remove();
$('#uploadForm').after('<embed src="'+e.target.result+'" width="450" height="300">');

Ahora llamaremos al método filePreview() para cambiar el file input.

$("#file").change(function () {
    filePreview(this);
});

Sitúa este código Javascript completo después del formulario HTML.

HTML

Formulario HTML muy simple que cuenta con un input file un botón de submit.

<form method="post" action="upload.php" enctype="multipart/form-data" id="uploadForm">
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="Upload"/>
</form>

Subir fichero utilizando PHP

Utiliza este simple script de PHO para subir el archivo a su respectivo directorio cuando el usuario haga clic en el botón de submit.

if(isset($_POST['submit']) && !empty($_FILES['file']['name'])){
    if(move_uploaded_file($_FILES['file']['tmp_name'],"uploads/".$_FILES['file']['name'])){
        echo 'File has uploaded successfully.';
    }else{
        echo 'Some problem occurred, please try again.';
    }
}

Fuente: codexworld.com