Ir al contenido principal

Destacado

Desarrollo web Bootcamp

  Introducción a la Programación La programación es el proceso de diseñar y escribir instrucciones que las computadoras entienden para realizar tareas específicas. Estas instrucciones se conocen como código , y permiten a los desarrolladores crear aplicaciones, sitios web, juegos y mucho más. Lenguajes de Programación Comunes en el Desarrollo Web En el desarrollo web, los lenguajes más utilizados incluyen: HTML : Define la estructura del contenido en una página web. CSS : Estiliza y da diseño a los elementos de HTML. JavaScript : Agrega interactividad y funcionalidades dinámicas a las páginas web.      PHP y Python : Son lenguajes de servidor para manejar la lógica y los datos. SQL : Sirve para gestionar bases de datos. Sintaxis Básica La sintaxis es un conjunto de reglas que determina cómo escribir código en un lenguaje específico. Es fundamental para que el programa funcione correctamente. Por ejemplo: javascript let mensaje = "¡Hola Mundo!" ; console . log (mens...

Subir imagen a servidor php

 

Subir imagen a servidor php 
En esta entrada veremos lo fácil y sencillo es subir imagenes a nuestro servidor apache, 
mediante php y ajax.
Primero creamos un archivo index.php

<html>
<head>
<title>Subir imagen al servidor</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

</head>
<body>

<div class="row">
<div class="card">
<div class="card-header"></div>
<div class="card-body">
<form action="" enctype="multipart/form-data">
<input type="file" id="image" onchange="SubirImagen()">
</form>

<div class="row">
<img src="" alt="" id="imagensubida">
</div>
</div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

    <script>
    function SubirImagen() {
    var formData = new FormData();
        var files = $('#image')[0].files[0];
        formData.append('file',files);
        $.ajax({
            url: 'subirimagen.php',
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
          
            success: function(response) {
               console.log(response);
               $("#imagensubida").attr('src',response);

            }
        });
    }
    </script>

</body>


</html>

Enseguida un archivo subirimagen.php

<?php 

$ruta='archivos/';
if (($_FILES["file"]["type"] == "image/jpg")
    || ($_FILES["file"]["type"] == "image/jpeg")
    || ($_FILES["file"]["type"] == "image/png")
    || ($_FILES["file"]["type"] == "image/gif")) {


move_uploaded_file($_FILES["file"]["tmp_name"], $ruta.$_FILES['file']['name']);

echo $ruta.$_FILES['file']['name'];
}else{

echo 0;
}


 ?>


Para que funcione debemos tener creada una carpeta llamada archivos con permisos 777
para que php pueda mover el archivo de la imagen 




Comentarios

Entradas populares