1

Hola tengo un formulario y un input de tipo file. ¿Cómo puedo hacer para que la imagen se envíe?

$( "#guardarDatos" ).submit(function( event ) {
        var parametros = $(this).serialize();
             $.ajax({
                    type: "POST",
                    url: "core/modal/agregar.php",
                    data: parametros,
                     beforeSend: function(objeto){
                        $("#datos_ajax_register").html("Mensaje: Cargando...");
                      },
                    success: function(datos){
                    $("#datos_ajax_register").html(datos);

                    load(1);
                  }
            });
          event.preventDefault();
        });

el form

<div class="form-group">
            <h4 class="example-title">Subir Imagen</h4>
            <input type="file"  name="image">
      </div>
          <div class="form-group">
            <label for="continente0" class="control-label">Author:</label>
            <input type="text" class="form-control" id="continente0" name="author" value="<?php echo Session::get('username'); ?>"  required maxlength="15">
          </div>
3

1 respuesta 1

1

Vamos por partes, primero lo que hay en el front-end:

$('#guardarDatos').submit(function( event ) {
  //obtenemos la imagen
  var imgElem = document.getElementById('image');
  //con esto generamos el texto de base64
  var imgData = getBase64Image(imgElem);
  //Creamos un input hidden y le asignamos ese texto generado
  var imagenNinja = document.createElement("input");
  imagenNinja.value = imgData;
  imagenNinja.name = "imagenBase64";
  imagenNinja.id = "imagenBase64";
  //con esto lo volvemos ninja para que nadie lo vea:
  imagenNinja.type = "hidden";
  var archivo = document.getElementById('image').parentNode.appendChild(imagenNinja);
  //ahora estos parametros van a tener la cadena de texto de Base 64 que representa la imagen
  var parametros = $(this).serialize();
  $.ajax({
      url: 'core/modal/agregar.php',
      dataType: 'json',
      data: parametros,
      type: 'POST',
      beforeSend: function(objeto){
         $("#datos_ajax_register").html("Mensaje: Cargando...");
      },
      success: function(datos) {
         $("#datos_ajax_register").html(datos);
         load(1);
      }
  });
  event.preventDefault();
});

function getBase64Image(imgElem) {
    var canvas = document.createElement("canvas");
    canvas.width = imgElem.clientWidth;
    canvas.height = imgElem.clientHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Ahora en el backend de PHP

$data = $_POST['imagenBase64'];
//en la linea anterior se traduce como:
//$data = 'data:image/png;base64,AFFAAFdsgBLKLKS346fj42Pj4...';
$data = str_replace('data:image/png;base64,', '', $data); // ojo, aquí solamente revisamos por png, queda para que investigues cómo ver si aceptamos también jpg ;)
$data = str_replace(' ', '+', $data);
$data = base64_decode($data);
$file = 'images/'. uniqid() . '.png'; // en lugar de uniqid() le pones el nombre que gustes :D
// guardamos el archivo
file_put_contents($file, $data);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.