Subir imagen con ajax y jQuery, PHP sin recargar

0
148
PHP
PHP

En este tutorial vamos a aprender a subir imágenes por jQuery Ajax con PHP fácilmente. El código permite subir una imagen al servidor sin recargar la página web y con una vista previa de la imagen cuando la subes.

Vamos a crear 3 archivos en este tutorial.

  • index.php con un Formulario en HTML para seleccionar la imagen que quiero subir y con un código en javascript.
  • ajaxupload.php este archivo contiene el código que se encarga de subir la imagen a la carpeta uploads a través de ajax. Solo subirá las imágenes con la extensión permitida.
  • script.js Código que te permite subir y ver imágenes sin actualizar en la pagina por el método ajax.

index.php

<!doctype html>
<html>
<head lang="en">
 <meta charset="utf-8">
 <title>Subir imagen ajax - quecosasleo.com</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
 <script type="text/javascript" src="js/jquery-1.11.3-jquery.min.js"></script>
 <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container">
 <h1><a href="">Subir imagen por ajax jquery</a></h1>
 <hr> 
 <div id="preview"><img src="no-image.jpg" /></div>
    
 <form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
  <input id="uploadImage" type="file" accept="image/*" name="image" />
  <input id="button" type="submit" value="Upload">
 </form>
    <div id="err"></div>
 <hr>
 <p><a href="http://www.quecosasleo.com" target="_blank">www.quecosasleo.com</a></p>
</div>
</body>
</html>

 ajaxupload.php

<?php

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = 'uploads/'; // upload directory

if(isset($_FILES['image']))
{
 $img = $_FILES['image']['name'];
 $tmp = $_FILES['image']['tmp_name'];
  
 // get uploaded file's extension
 $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
 
 // can upload same image using rand function
 $final_image = rand(1000,1000000).$img;
 
 // check's valid format
 if(in_array($ext, $valid_extensions)) 
 {     
  $path = $path.strtolower($final_image); 
   
  if(move_uploaded_file($tmp,$path)) 
  {
   echo "<img src='$path' />";
  }
 } 
 else 
 {
  echo 'invalid file';
 }
}

?>

 script.js

$(document).ready(function (e) {
 $("#form").on('submit',(function(e) {
  e.preventDefault();
  $.ajax({
         url: "ajaxupload.php",
   type: "POST",
   data:  new FormData(this),
   contentType: false,
         cache: false,
   processData:false,
   beforeSend : function()
   {
    //$("#preview").fadeOut();
    $("#err").fadeOut();
   },
   success: function(data)
      {
    if(data=='invalid file')
    {
     // invalid file format.
     $("#err").html("Invalid File !").fadeIn();
    }
    else
    {
     // view uploaded file.
     $("#preview").html(data).fadeIn();
     $("#form")[0].reset(); 
    }
      },
     error: function(e) 
      {
    $("#err").html(e).fadeIn();
      }          
    });
 }));
});

 

 

Dejar respuesta

Please enter your comment!
Please enter your name here