Subir Documento Usando jQuery y PHP

Vista previa de la imagen característica permite al usuario ver la imagen elegida antes de cargar. Vista previa de la imagen antes de cargar es una característica necesaria para la funcionalidad de carga de archivos. Ayuda al usuario a ver el archivo elegido y cambiar la imagen antes de cargar. Desde la perspectiva del usuario, es muy útil para cargar imagen perfecta o archivo sin hacer la repetitiva cargar. 

Usted puede fácilmente agregar imagen opción preview al subir un archivo usando JavaScript y jQuery. En este tutorial, vamos a escribir algo de JavaScript y jQuery código para previsualizar la imagen antes de cargar. Además, le proporcionamos la manera de obtener una vista previa de cualquier tipo de archivos antes de cargar el archivo. Siga nuestro ejemplo de secuencia de comandos con la instrucción sobre la imagen de vista previa antes de cargar usando jQuery.

JavaScript

La secuencia de comandos de ejemplo utiliza algunos jQuery JavaScript así que al principio incluyen la biblioteca de jQuery.

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

JavaScript FileReader se utilizará para leer el contenido del archivo en función de filePreview(). Una vez cargado el contenido del archivo te prestamos la previsualización de la imagen bajo la forma de subir archivos.

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 desea obtener una vista previa de todos los tipos de archivo, utilice <embed> tag instead of <img>Etiqueta. Coloque el código siguiente en el lector.onload y quitar el código existente.

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

Ahora llame al método filePreview() en cambio el archivo de entrada.

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

Coloque este código JavaScript completo después de la forma HTML.

HTML

Simple formulario HTML con el archivo de entrada y el botón Enviar.

<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 Documento usando PHP

Uso sencillo código PHP para cargar el archivo en el directorio respectivo cuando el usuario hace clic en el botón Enviar.

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.';
    }
}