2

Soy nuevo con Ajax intento subir archivos a mi carpeta y almacenar la ruta en mi MySQL, estos son mis avances:

Tengo mi ventana modal, con la cual colocas los datos del archivo:

<form class="form-horizontal" action="../../phpcrud/create_documentos.php" method="POST" id="create_documentos_form" enctype="multipart/form-data">
<div class="modal-body">


  <div class="form-group">
    <label for="titulo" class="col-sm-2 control-label">Titulo</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="titulo" name="titulo" placeholder="Titulo">
    </div>
  </div>

<div class="form-group">
  <label for="archivo" class="col-sm-2 control-label">Elejir Documento</label>
  <div class="col-sm-10">
    <input type="file" name="archivo" id="archivo"/>
  </div>
</div>
</div>

<div class="modal-footer">   
  <button type="submit" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>

Mi evento se llama create_documentos_form, y este es el codigo de mi.js

$("#create_documentos_modal").on('click', function() {
    $("#create_documentos_form")[0].reset();
    $(".form-group").removeClass('has-error').removeClass('has-success');
    $(".text-danger").remove();
    $(".message_create_documentos").html("");

    $("#create_documentos_form").unbind('submit').bind('submit', function()            
  {
        $(".text-danger").remove();
        var form = $(this);

        var titulo = $("#titulo").val();
        var file2 = document.getElementById("archivo");   //TENGO DUDA
        var archivo = file2.files[0];                     //TENGO DUDA

        if(titulo && archivo) 
        {
            $.ajax({
                url : form.attr('action'),
                type : form.attr('method'),
                data : form.serialize(),
                dataType : 'json',
            });
        }
        return false;
    });
});

Reviso que en mi variable archivo contenga algo mediante un console.log()

Consola

Al parecer ahi todo esta bien esta el nombre de la imagen, tamaño etc, intento almacenarla en mi archivo Php de la siguiente manera:

 if($_POST) {
 $validator = array('success' => false, 'message_create_documentos' => array());

$titulo = $_POST['titulo'];

$nombre = $_FILES['archivo']['name'];
$tipo = $_FILES['archivo']['type'];
$tamanio = $_FILES['archivo']['size'];
$ruta = $_FILES['archivo']['tmp_name'];
$destino = "archivos/" . $nombre;

$sql = "INSERT INTO documentos (titulo,ruta) VALUES ('$titulo', '$destino')";
$query = $connect->query($sql);

if($query === TRUE) {
    $validator['success'] = true;
    $validator['message_create_documentos'] = "Agregado Exitosamente";
} else {
    $validator['success'] = false;
    $validator['message_create_documentos'] = "Error mientras agrega la información";
 }

$connect->close();
echo json_encode($validator);
}

En esta parte es en donde el registro se pierde

4 respuestas 4

2
$("#create_documentos_form").unbind('submit').bind('submit', function(){
    $(".text-danger").remove();
    var form = $(this);

    var titulo = $("#titulo").val();
    var file2 = $('#archivo');   //Ya que utilizas jquery aprovechalo...
    var archivo = file2[0].files;       //el array pertenece al elemento

    if(titulo && archivo) 
    {

        // Crea un formData y lo envías
        var formData = new formData(form);
        formData.append('titulo',titulo);
        formData.append('archivo[]',archivo);

        jQuery.ajax({
            url: 'url.php',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
                alert(data);
            }
        });
    }
    return false;
});
5
  • Muchas gracias Ivan me has solucionado un gran problema Commented el 14 mar. 2017 a las 21:15
  • 1
    Esta respuesta tiene 2 errores. 1.- Es var formData = new FormData(form) (F mayuscula). 2.- Esta línea formData.append('archivo[]',archivo);, el nombre del campo debería ser sin corchetes ([]), de lo contrario se estará enviando un array de archivos en lugar de un solo archivo. Observaciones: si al crear el formData se pasa el formulario, entonces no ser necesario agregar los campos manualmente
    – Marcos
    Commented el 14 mar. 2017 a las 21:16
  • si me acado de dar cuenta de ese problema @MarcosGallardo muchas gracias Commented el 14 mar. 2017 a las 22:02
  • Lo cambie pero me marca este error en consola: TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement. Commented el 14 mar. 2017 a las 22:08
  • @Rastalovely, has encontrado el 3er error, la variable form es un jQueryObject y no un HTMLFormElement. La solución a ese error es esta: var formData = new FormData(form[0]);
    – Marcos
    Commented el 15 mar. 2017 a las 12:27
1

Una solución es usar la API FormData (IE10+).

Ejemplo:

$("#create_documentos_form").unbind('submit').bind('submit', function() {
    $(".text-danger").remove();
    var form = $(this);

    var titulo = $("#titulo").val();
    var file2 = document.getElementById("archivo");
    var archivo = file2.files[0];

    if(titulo && archivo) {

        $.ajax({
          url : form.attr('action'),
          type : form.attr('method'),
          data : new FormData(form[0]), // <-- usamos `FormData`
          dataType : 'json',
          processData: false,  // <-- le indicamos a jQuery que no procese el `data`
          contentType: false // <-- le indicamos a jQuery no establecer el `contentType`
        });
    }
    return false;
});
0
0
$.ajax({
        type: "POST",
        url:  "HTML/docAjax.php",
                    data: {
                       post1 = "Post1",
                       post2 = "Post2"                            

                     },
        dataType: "text",
        success: function (data) {

                    //aqui cachas lo que regresas con el archivo php
                   console.log(data);


                }

    });
2
  • Con esto lo pones en tu funcion y dependiendo lo que devuelvas en el php es lo que va recibir la funcion data un ejemplo seria. $post1 = $_POST["post1"]; $ post2 = $_POST["post2"]; echo $post1." y ".$post2; Commented el 14 mar. 2017 a las 19:22
  • Gracias clemente estoy revisando... Commented el 14 mar. 2017 a las 19:29
0

Buenas Dias, permiso y para agregar le que me Vaya mostrando el porcentaje en un div ? en otras palabras que mientras suba el archivo, muestre el porcentaje de subida y que pueda mostrar ese valor en porcentaje en un div que tiene id="porcentaje" y en un div que tiene id="progress" style="width:porcentaje a mostrar;"

no se si me di a entender.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container navbar">
        <h2>Subir Archivos de publicaciones</h2>
        <p>The .active class animates the progress bar:</p>
        <div class="form collapse navbar-collapse">

            <form action="" id="form-subirimg">
                <div class="form-group">
                    <label class="control-label" for="cod"><span class="glyphicon glyphicon-user"></span> Codigo de registro</label>
                    <input type="file" class="form-control" name="file" id="subir" multiple required placeholder="Ingrese codigo para registrar">
                </div>

                <div class="progress">
                    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" id="progress" style="min-width: 5%;">
                        <div id="porcentaje"></div>
                    </div>
                </div>

                <div class="form-group" id="msm">

                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-floppy-save"></span>Subir</button>
                    <button type="button" class="btn btn-danger btn-default pull-rigth" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
                </div>
            </form>

        </div>

    </div>
 <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>
0

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.