javascript - 具有多个文件上传功能的 PHP 表单

Question

我有以下用于文件上传的联系表单的代码，它工作得很好，但我不知道如何使其能够处理多个文件上传。

表格

<?php
               <form id="formulario" name="formulario" method="POST" action="" enctype="multipart/form-data">                    <p>
                    <label for="nombre">Nombre</label><span class="requerido"></span>
                    <input type="text" name="nombre" id="nombre" size="30" required>
                </p>
                <p>
                    <label for="email">E-mail</label><span class="requerido"></span>
                    <input type="text" name="email" id="email" required>
                </p>
                <p>
                    <label for="ciudad">Ciudad</label><span class="requerido"></span>
                    <input type="text" name="ciudad" id="ciudad" required>
                </p>
                <p>
                    <label for="telefono">Teléfono</label><span class="requerido"></span>
                    <input type="text" name="telefono" id="telefono" required>
                </p>
                <p>
                    <label for="comentarios">Comentarios</label><span class="requerido"></span>
                    <textarea id="comentarios" name="comentarios" cols="30" required></textarea>
                </p>
                <p>
                    <label for="asunto">Subir Foto</label>
                    <input type="file" name="adjunto" id="adjunto" />
                </p>
                <p>
                    <label for="asunto2">Subir Foto</label>
                    <input type="file" name="adjunto2" id="adjunto2" />
                </p>
                <p>
                    <label for="asunto3">Subir Foto</label>
                    <input type="file" name="adjunto3" id="adjunto3" />
                </p>
                <p class="submit">
                    <input type="submit" id="submit" name="submit" class="form-button btn" value="Enviar Consulta" />
                </p>
            </form>
?>

PHP

<?php

//-------------------------------------------------------------------
// VARIABLES DEL MENSAJE
$comentarios = preg_replace('/\n/','<br>',htmlspecialchars(urldecode($_POST['comentarios'])));
$nombre = urldecode($_POST['nombre']);
$email = urldecode($_POST['email']);
$ciudad = urldecode($_POST['ciudad']);
$telefono = urldecode($_POST['telefono']);
$fecha = date('c');

// Título del mensaje
$titulo = "Nuevo mensaje de $nombre desde el formulario de contacto";

// El cuerpo del mensaje
$data = "";


// Definir si es una solicitud AJAX
define('IS_AJAX', isset($_GET['ajax']) && $_GET['ajax'] === 'true');

// Aquí almacenaremos los errores
$errores = array();

// Variables para manejar el adjunto
$hay_adjunto = false;
$adjunto = null;
$boundary = null;

/*
 * Si hay archivos, hay que cambiar el inicio del mensaje y crear un separador (boundary)
 */
if( isset($_FILES['adjunto']) && $_FILES['adjunto']['error'] === 0) {
    $hay_adjunto = true;
    $adjunto = $_FILES['adjunto'];
    $boundary = md5(time());
    $data = "--".$boundary. "\r\n";
    // Y el comienzo del HTML
    $data .= "Content-Type: text/html; charset=\"utf-8\"\r\n";
    $data .= "Content-Transfer-Encoding: 8bit\r\n\r\n";
}

/*
 * Comprobaciones de los campos requeridos
 */
if( ! filter_var($email, FILTER_VALIDATE_EMAIL) )
    $errores[] = $mensajes_error['email'];

if( ! isset($_POST['comentarios']) )
    $errores[] = $mensajes_error['comentarios'];

if( ! isset($_POST['nombre']) )
    $errores[] = $mensajes_error['nombre'];

// El mensaje HTML
$data .= "<div class='mensaje'>
        <h1>Nuevo mensaje de $nombre</h1>
        <p><strong>Fecha:</strong> $fecha</p>
        <p><strong>Ciudad:</strong> $ciudad</p>
        <p><strong>Teléfono:</strong> $telefono</p>
        <p><strong>Comentarios:</strong><br>$comentarios</p>
        <p><strong>Email:</strong> <a href='mailto:$email'>$email</a></p>
    </div>";

// Las cabeceras empiezan igual
$cabeceras = "MIME-Version: 1.0\r\n";
$cabeceras .= "From: $nombre<$email>\r\n";
$cabeceras .= "To: $receptor\r\n";

// Si no hay errores probamos a enviar el archivo
if( count($errores) === 0 ) {

    // Content-Type dependiente de si hay adjunto
    if( $hay_adjunto ) {
        $cabeceras .= "Content-Type: multipart/mixed; boundary=\"".$boundary."\"";

        // Si hay archivo
        // También añadimos al cuermo del mensaje un separador 
        $data .= "\r\n";
        $data .= "--" . $boundary . "\r\n";
        // Y el archivo con su correspondiende Content-Type (octet-stream para aplicaciones) y nombre
        $data .= "Content-Type: application/octet-stream; name=\"".$adjunto['name']."\"\r\n";
        $data .= "Content-Transfer-Encoding: base64\r\n";

        // Indicamos que es un adjunto
        $data .= "Content-Disposition: attachment\r\n\n\r";

        // Vamos con el adjunto: chunk_split transforma la cadena en base64 en estandar
        $data .= chunk_split(base64_encode(file_get_contents($adjunto['tmp_name']))) . "\r\n";

        // Acabamos el mensaje
        $data .= "--" . $boundary . "--";
    } else {
        // Si no lo hay nos bastará con decir que es un mensaje HTML
        $cabeceras .= "Content-type: text/html; charset=utf-8\r\n";
    }

    // Enviamos nuestro email y damos cuenta si hay algún error
    if(mail($receptor, $titulo, $data, $cabeceras, '-f kharown@gmail.com')) {
        // Si no hay ningún error, lo indicamos con null
        $errores = null;
    } else {
        // Si no indicamos que hubo un error
        $errores[] = "Hubo un error al enviar el e-mail";
    }
}

// Si es una solicitud AJAX, enviamos el JSON y no ejecutamos más código
if( IS_AJAX ) {
    echo json_encode(array(
        'success' => $errores === null,
        'errors' => $errores,
        'has_files' => $hay_adjunto
    ));
    exit;
}
// Si no ahora vendría el documento (index.php)

和 JS

(function(window, document) {
if( ! document.querySelectorAll ) {
    return false;
}

window.ec_form_messages = window.ec_form_messages || { error: {} };
// Abreviar document.getElementById
function $(id){
    return document.getElementById(id);
}
function log() {
    return window.console && console.log(arguments);
}

/*
    Variables para evitar acceder al DOM muchas veces,
    y abreviar
*/
var form = $('formulario'),
    error = $('error'),
    success = $('success'),
    inputs = form.querySelectorAll('input[name], textarea[name], select[name]'),
    elements = {},
    i = 0;

for(; inputs[i]; i++) {
    elements[inputs[i].getAttribute('name')] = inputs[i];
}

function getValue(element) {
    switch(element.nodeName.toLowerCase()){
        case 'input':
            return element.getAttribute('type').toLowerCase() === "file" ? element.files[0] : element.value;
            // No hace falta break; (se ha acabado la funcion)
        case 'select': 
            return element.options[element.selectedIndex].value;
        case 'textarea':
        default:
            return element.value;
    }
}

function getElementsData() {
    var ret = {},
        i;
    // Creamos un objeto con los valores de cada elemento
    for( i in elements ) {
        if( elements.hasOwnProperty(i) ) {
            ret[i] = getValue(elements[i]);
        }
    }
    return ret;
}

// Comprobar e-mail y cadena vacía
function emailVerification(valor){
    // Expresión regular para validar el email (http://stackoverflow.com/questions/46155/validate-email-address-in-javascript)
    // Yo había hecho una propia, pero no estoy en mi ordenador, y esta parece funcionar bien
    var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

    return regex.test(valor);
}
function estaVacio(valor){
    return valor === "";
}

// Función que sucederá cada vez que el formulario se envía
function onsubmit(e){
    var errores = [],
        valores = getElementsData(),
        hasFile;

    e = e || window.event;

    if( ! e.preventDefault ) {
        e.preventDefault = function() {
            e.returnValue = false;
        }
    }

    // comprobamos errores (prefiero mostrarlos normalmente quitando el required)
    if( estaVacio(valores.nombre)){
        errores.push(window.ec_form_messages.error.nombre);
    }
    if( ! emailVerification(valores.email)){
        errores.push(window.ec_form_messages.error.email);
    }
    if( estaVacio(valores.mensaje) ){
        errores.push(window.ec_form_messages.error.mensaje);
    }

    // Si hay errores no enviamos el formulario
    if(errores.length){
        error.innerHTML = '<ul><li>' + errores.join('</li><li>') + '</li></ul>';
        e.preventDefault();
        return false;
    }

    // Si no hay errores, ponemos la lista de errores vacíos
    error.innerHTML = '';

    hasFile = !! valores.adjunto;


    // Si no hay la tecnología necesaria para enviar el formulario con el archivo via AJAX,
    // Lo enviamos via HTTP (dejamos que se ejecute normalmente)
    if( hasFile && ! window.FormData ) {
        return true;
    }

    if( window.FormData ) {
        valores = new FormData(form);
    } else {
        valores = convertirObjeto(valores);
    }

    enviarform(valores, hasFile);

    e.preventDefault();

    return false;
}

// Función mediante la que enviámos el formulario
function enviarform(data, hasFile){
    var request = new window.XMLHttpRequest();

    request.open("POST", '?ajax=true', true);
    if( ! hasFile && ! window.FormData ) {
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    }
    request.onreadystatechange = function(){
        var response;
        if( request.readyState === 4 ){
            response = JSON.parse(request.responseText);
            if( response.errors ){
                return error.innerHTML = "<ul><li>" + response.errors.join("</li><li>") + "</li></ul>"
            }
            // Si está todo correcto mostramos el mensaje y ocultamos el formulario
            correcto.innerHTML = window.ec_form_messages.correcto;
            form.style.display = "none";
        }
    }
    request.send(data);
}

// Convierte un objeto en una cadena de texto preparada para ser enviada al servidor
function convertirObjeto(obj){
    var ret = '',
    key, current = 0;
    for (key in obj){
        ret += ((current === 0 ? '' : '&') + key + '=' + encodeURIComponent(obj[key]) );
        current++
    }
    return ret;
}

/*
    Si no está javascript activado y es un navegador moderno, el navegador comprobará los campos por nosotros
    Si sí lo está, prefiero comprobarlos y mostrar los errores en conjunto.
*/
elements.nombre.required = elements.email.required = elements.mensaje.required = false;
elements.email.type = "text";

// Añadimos el evento cuando el formulario va a ser enviado
form.addEventListener ? form.addEventListener('submit', onsubmit, false): form.attachEvent('onsubmit', onsubmit)

})(window, document, undefined)

Answer 1

提交表单后，每个输入字段都可以通过其名称进行访问。因此，就像您通过 $_FILES 超全局数组访问 adjunto 字段的文件内容一样，您可以检索其他字段的内容: $_FILES['adjunto2 '] 等