Question

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!

Answer 1

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 ) )

Answer 2

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!