entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

¿Cómo subir un archivo word o pdf además de 2 campos de texto con AJAX y PHP?

Hola a todos,

Cómo podría subir un archivo pdf o word (que sólo sea en estos formatos) además de 2 campos de texto mediante AJAX (JQuery) y PHP?

Es decir tengo lo siguiente:

<-------------------------- HTML ------------------------------>

<form id="form-trabajo-ajax" method="post">             
    <label for="resumen" class="text-white label-contacto">Resumen*</label>
    <textarea id="resumen" name="resumen" rows="7"></textarea>

    <label for="palabras" class="text-white label-contacto">Palabras Clave*</label>
    <input type="text" id="palabras" name="palabras">

    <input name="archivo" id="archivo" type="file"/>

    <a href="#" id="btn-subir-trabajo">Subir</a>
</form>

<-------------------------- JS CON JQUERY ------------------------------>

// capturo el evento clic
$("#btn-subir-trabajo").click(function(){
    // url donde se subirá el archivo
    var url = "subirArchivo";
    $.ajax({
        type: 'POST',
        url: url,
        data: $("#form-trabajo-ajax").serialize(), // adjunto el formulario
        success: function(data)
        {
           alert(data); // muestro la respuesta
        }
    });
    return false;
});

¿Qué tendría que hacer para subir el archivo y los campos de texto? ¿Cómo tendría que hacer en el PHP para recibir los 3 datos?.

Muchas gracias por su colaboración.

Saludos!

2 Respuestas

2votos

white Puntos75880

En esta pregunta

http://entredesarrolladores.com/7348/subir-foto-con-ajax-jquery-y-codeigniter

yo hize un código para subir archivos con progreso y callbacks.

Si te sirve te dejo el código actualizado:

var uploader = {

    reader : null,
    form_data : null,
    file_data : null,
    callbacks : {
        progress : false,
        loaded : false,
        uploaded : false,
        error : false
    },
    submit_url : null,
    input_file : null,

    init : function(input_file, url)
    {
        this.reader = new FileReader();
        this.form_data = new FormData();
        this.submit_url = url ? url : null;
        this.input_file = input_file;

        this.handle_file_upload();

        return this;
    },

    on : function(type, callback)
    {
        var _undefined;

        if(this.callbacks[type] === _undefined || typeof callback !== 'function')
            return this;

        uploader.callbacks[type] = callback;

        return this;
    },

    upload_file : function()
    {
        this.file_data = $(this.input_file).prop('files')[0];

        this.form_data.append('file', this.file_data);

        if( $(this.input_file).parent('form').children('input').length > 1 )
        {
            $(this.input_file).parent('form').children('input').each(function(){

                if( this === uploader.input_file )
                    return;

                if( $(this).is('[type=submit]') )
                    return;

                uploader.form_data.append($(this).attr('name'), $(this).val());
            });
        }

        $.ajax({
            url: uploader.submit_url,
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            data: uploader.form_data,                         
            type: 'post',
            xhr: function()
            {
                var xhr = $.ajaxSettings.xhr();

                if(xhr.upload)
                {                   
                    xhr.upload.addEventListener(
                        'progress',
                        uploader.handle_progress,
                        false
                    );
                }

                return xhr;
            },
            complete : function(data)
            {
                if(uploader.callbacks.loaded)
                    uploader.callbacks.loaded.call(null, data);
            },
            success : function(data)
            {
                if(data.error)
                {
                    if(uploader.callbacks.error)
                        uploader.callbacks.error.call(null, data.error, data);

                    return false;
                }

                if(uploader.callbacks.uploaded)
                    uploader.callbacks.uploaded.call(null, data);
            },
            error : function(data)
            {
                if(uploader.callbacks.error)
                    uploader.callbacks.error.call(null, '404 not found', data);

            }
        })

        return false; // prevent submit action
    },

    handle_progress : function(event)
    {
        if (event.lengthComputable)
        {

            var percentage = (event.loaded / event.total) * 100;

            if(uploader.callbacks.progress)
                uploader.callbacks.progress.call(null, percentage, this.file_data);

        }
    },

    handle_file_upload : function()
    {
        if(!$(this.input_file).is('input[type=file]'))
        {
            throw new Error('el campo elegido es incorrecto');
        }

        if( $(this.input_file).parent('form').length > 0 )
        {
            // set submit url from <form action>
            this.submit_url = $(this.input_file).parent('form').attr('action');

            // custom form submit.
            $(this.input_file).parent('form').on('submit', function(e){
                e.preventDefault();
                return uploader.upload_file(this);
            });
        }
    }

};

$(document).ready(function() {

    uploader
        .init('#archivo')
        .on('progress', function(percentage){
            // en este evento obtenemos el porcentaje de subida C:

            console.log('progreso: ', percentage);
        })
        .on('uploaded', function(data){
            // el archivo se subió
            // tomamos medidas aqui C:
        })
        .on('error', function(msg, data){

            // ocurrio un error
            console.log(msg);
        });

});

el fichero php puede ser:

<?php

header('Content-type: text/html; charset=UTF-8');

$file = $_FILES["file"]["name"];
$target = dirname(__FILE__) . '/uploads/' . $file;

if (!move_uploaded_file($_FILES["file"]['tmp_name'], $target))
{
    die(json_encode(array(
        'error' => 'error al subir el archivo'
    )));
}
else
{
    die(json_encode(array(
        'data' => $_POST['palabras']
    )));
}

el formulario:

<form id="form-trabajo-ajax" method="post" action="upload.php">             
    <label for="resumen" class="text-white label-contacto">Resumen*</label>
    <textarea id="resumen" name="resumen" rows="7"></textarea>

    <label for="palabras" class="text-white label-contacto">Palabras Clave*</label>
    <input type="text" id="palabras" name="palabras">

    <input name="archivo" id="archivo" type="file"/>

    <a href="#" id="btn-subir-trabajo" onclick="$(this).parent('form').submit()">Subir</a>
</form>

la sintaxis de mi código es:

uploader.init( id campo archivo, url )
.on( evento, function( argumentos ) )

0voto

admont28 comentado

Hola @white una pregunta, este código que me pasaste sirve para subir 1 archivo y además de esto otros campos de tipo texto? (esto al mismo tiempo) o solo es para el archivo?

Gracias :D

0voto

white comentado

Sirve para subir todos los campos del formulario, pero necesita como parametro un input del tipo file y este necesita estar dentro de un formulario con los demás campos, de todos modos el código es flexible y puedes modificarlo a tu antojo.

saludos!

2votos

Leonardo-Tadei Puntos227320

Dado que para subir un archivo hace falta un FROM con codificación MULTIPART y procesar los valores para enviarlos al servidor previamente, la sugerencia general es usar algún plugin para JQuery que se encargue de esto: http://www.jqueryrain.com/demo/jquery-file-upload/

De otra forma, deberías trabajar directamente con los datos del formulario para procesarlos y que puedan ser enviados vía AJAX:

con este HTML

<input type="text" id="text1" name="text1" />
<input type="text" id="text2" name="text2" />
<input type="file" id="uploadfile" name="uploadfile" />
<input type="button" value="upload" onclick="upload()" />

y este JS:

   var client = new XMLHttpRequest();

   function upload() {
      var text1 = document.getElementById("text1");
      var text2 = document.getElementById("text2");
      var file = document.getElementById("uploadfile");

      /* Create a FormData instance */
      var formData = new FormData();
      /* Add the file */ 
      formData.append("text1",text1);
      formData.append("text2",text2);
      formData.append("upload", file.files[0]);

      client.open("post", "/subirarchivo", true);
      client.setRequestHeader("Content-Type", "multipart/form-data");
      client.send(formData);  /* Send to server */ 
   }
   /* Check the response status */  
   client.onreadystatechange = function() {
      if (client.readyState == 4 && client.status == 200) {
         alert(client.statusText);
      }
   }

y en el script subirarchivo recibís los valores cómo siempre vía $_POST y $_FILES

Saludos!

0voto

admont28 comentado

Hola @Leonardo-Tadei

Tengo una confusión, me brindas 2 opciones:

  1. Utilizar un plugin de JQuery
  2. Hacerlo manual con el código que me indicaste.

si fuese manual el código que me indicaste es netamente javascript, que sintaxis debería usar con JQuery?

Gracias y saludos!!

0voto

Leonardo-Tadei comentado

El código es JavaScript puro. No entiendo tu pregunta de qué sintaxis usar con JQuery.

Recordá que JQuery es un framework escrito en JavaScript, así que al ser ambas cosas del mismo lenguaje, se pude mezclar código de una cosa y otra sin problemas, como por ejemplo que un callback JQuery llame a tu función JavaScript o que tu función JavaScript use los selectores de JQuery para obtener los valores.

Acá hay una buena explicación de qué hace cada cosa en ese código http://blog.teamtreehouse.com/uploading-files-ajax

Saludos!

0voto

admont28 comentado

Gracias @Leonardo-Tadei aclarado los conceptos :D

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta