[SOLUCIONADO] Enviar un Archivo con jquery

chigorin4 · #1 (**permalink**) 17/05/2015, 17:43

Hola, mi problema es este: quiero obtener ademas del archivo dos campos de mas, ya verifique que funcionara el archivo, sin embargo no puedo recibir los otros campos

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <title>Archivo</title>
    
    <style type="text/css">
    body
    {
    
        font-size: 1em;
        font-family: Arial;
        padding:0px;
        margin: 0px;
    }
    a{
        text-decoration: none;
 
    }
 
 
    h1
    {
        font-size: 4em;
        text-align: center;
    }
    h2
    {
        font-size: 5em;
    }
 
li
{
    list-style: none;
}
 
h2{
 
    text-align: center;
}
 
nav a:hover{
    
    font-style: normal;
    text-decoration: none;
    color: white;
 
}
 
nav a:visited{
 
    font-style: normal;
    text-decoration: none;
}
nav
{
    
    color:white;
    background-color: #01A9DB;
    text-align: center;
    position: relative;
    font-size: 2.5em;
}
nav li
{
    cursor:pointer;
}
nav li:hover
{
    background-color: black;
    color: white;
}
section
{
    padding: 10px;
    font-family: 2em;
}
 
#formulario{
    padding: 10px 10px;
}
 
</style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
 
<script src="archivos.js"></script>
</head>
<body>
    <h2>Archivos</h2>
    <nav>
        <li><i class="glyphicon glyphicon-pencil"></i></li>
        <li>Materias</li>
        <li>Requisitos</li>
        <li>Debate y Velada</li>
        <li><a href="index.php"> Volver</a></li>
    </nav>
 
    <form id="formulario"  enctype="multipart/form-data">
        <label>Autor: </label><select name='auto' id='auto'>
            <option>Selecciona</option>
        </select><br>
        <label>Tema: </label><input type="text" id="tema"><br>
        <label>Archivo: </label><input type="file" name="archivo" id="archivo">
        <input type="submit">
 
    </form>
</body>
</html>

Código Javascript:

Ver original$("form input[type=file]").change(function(){
 
    var Extension = "";
    var archivo = $("#archivo")[0].files[0];
        var Nombre = archivo.name;
        Extension = Nombre.substring(Nombre.lastIndexOf('.') + 1);
        var Tamano = archivo.size;
        var tipo = archivo.type;
        alert("Nombre " + Nombre + " Tamaño " +  Tamano + "bytes");
 
    })
 
    $("form input[type=submit]").click(function(e){
        e.preventDefault();
        var formData = new FormData($("#formulario")[0]);
        var restoFormulario = {
            AUTOR:$("#auto").val(),
            TEMA:$("#tema").val()
        };
 
        var DataFinal = $.extend(formData,restoFormulario)
        
        $.ajax({
            data: DataFinal,
            url: "archivos_enviar.php",
            type: "post",
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                alert(data);
            }
 
 
        })
 
 
    })

Código PHP:

Ver original$archivo = $_FILES['archivo']['name'];
    $autor = $_POST['AUTOR'];
 
    $tema = $_POST['TEMA'];
    $ruta = "archivos/" . $archivo;
    if($archivo)
    {
        move_uploaded_file($_FILES['archivo']['tmp_name'], $ruta);
        echo $autor . " " . $tema;
    }