Subir archivos antes del envio

ferdinand123 · #1 (**permalink**) 05/07/2012, 15:44

Por favor, necesito ayuda en lo siguiente:

Tengo un formulario de envío de email en mi web, con la función para enviar archivos adjuntos. Lo que quiero es poder subir los archivos antes del envío con una barra de progreso. Para ello estoy usando el plugin jQuery File Upload, el cual me funciona perfectamente.
Lo que no puedo hacer es que el email adjunte los archivos subidos con el plugin.

Gracias de antemano.

Triby · #2 (**permalink**) 05/07/2012, 23:41

Y el código que no te funciona... dónde está?

ferdinand123 · #3 (**permalink**) 16/07/2012, 17:18

Ok, primero hay un formulario con su correspondiente envío de adjuntos, el cual funciona perfecto. Luego he agregado el jQuery File Upload para subir archivos al servidor, el cual también funciona. Lo que no sé es como pasarle variables al formulario PHP para que envíe los adjuntos subidos con el jQuery File Upload.

Acá va todo el código en dos partes:

<?php

$direccion_envio= '[email protected]';
//la direccion a la que se enviara el email.

$url= 'http://www.xxxx.php';
//la URL donde esta publicado el formulario. SIN la barra al final

$cantidad_archivos= 5;
//la cantidad máxima de archivos que se permitirá enviar.

//FIN CONFIGURACION

?>

<?PHP
//proceso del formulario
// si existe "enviar"...

$mensaje='<div id="tex1">Solicite su cotización<br />
</div>';

if (isset ($_POST['enviar'])) {

// vamos a hacer uso de la clase phpmailer,
require("inc/class.phpmailer.php");

$mail = new PHPMailer();

//recogemos las variables y configuramos PHPMailer

$mail->FromName = $_POST['nombre'];

$comentario=$_POST['comentario'];

//comprobamos si se adjuntaron archivos, los cargamos en el servidor y los pasamos como adjuntos del email
if (isset($_FILES['files']['tmp_name'])) {
$achivos_adjuntos='';
$i=0;
do {
if($_FILES['files']['tmp_name'][$i] =="")
{
$aleatorio = rand();
$nuevonombre = $aleatorio.'-'.$_FILES['files']['name'][$i];

$achivos_adjuntos .= '<br /><a href="'.$url.'server/php/files/'.$nuevonombre.'">'.$nuevonombre.'</a></strong>';
$mail->AddAttachment($_FILES['files']['files/'][$i], $nuevonombre);
}
$i++;
} while ($i < 1);

}

//comprobamos si todos los campos fueron completados
if ($_POST['nombre']!='' && $_POST['comentario']!='' && $error_archivo=='') {

$nombre=$_POST['nombre'];
$comentario=$_POST['comentario'];

//armamos el html
$contenido = '<html><body>';
$contenido .= '<p>Nombre: <strong>'.$nombre.'</strong></p>';
$contenido .= '<p>Mensaje: <strong>'.$comentario.'</strong></p>';
$contenido .= '<hr />';
$contenido .= '<p>Archivos Adjuntos: '.$achivos_adjuntos.'</p>';
$contenido .= '<hr />';
$contenido .= '</body></html>';
$mail->Body = $contenido;
// si todos los campos fueron completados enviamos el mail

$email = strip_tags(stripslashes($_POST['email']));
//this is repeated for several other fields, then:
$nombre = strip_tags(stripslashes($_POST['nombre']));

if(isInjected($email)) { die(); }
if(isInjected($nombre)) { die(); }

$mail->Send();

$flag='ok';
$mensaje='<div id="tex">Su mensaje se envió con éxito.</div>';

} else {

//si no todos los campos fueron completados se frena el envio y avisamos al usuario
$flag='err';
$mensaje='<div id="error">- xxxx '.$error_archivo.'</div>';

}
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Solicitar</title>
<meta name="Keywords" content="zz" />
<meta name="Description" content="zzz" />


<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">



<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">

<link rel="stylesheet" href="css/jquery.fileupload-ui.css">



<script type="text/javascript" src="js2/jquery-1.4.2.min.js"></script>
<script src="js2/jquery.form.js" type="text/javascript" language="javascript"></script>
<script src="js2/jquery.MultiFile.pack.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
OCULTO="none";
VISIBLE="block";
function mostrar1(blo) {
document.getElementById(blo).style.display=VISIBLE ;
document.getElementById('ver_off1').style.display= VISIBLE;
document.getElementById('ver_on1').style.display=O CULTO;
}
function ocultar1(blo) {
document.getElementById(blo).style.display=OCULTO;
document.getElementById('ver_off1').style.display= OCULTO;
document.getElementById('ver_on1').style.display=V ISIBLE;
}
</script>

<style type="text/css">

</style>

</head>

ferdinand123 · #4 (**permalink**) 16/07/2012, 17:18

Ahora el Body:

<body>

<div id="templatemo_content" >


<div id="cont8">

<div id="cont9">
<div id="form">

<?php echo $mensaje; /*mostramos el estado de envio del form */ ?>

<?php if($cantidad_archivos > 1) {$plural='s';} else {$plural='';} ?>

<?php if ($flag!='ok') { ?>
<form action="<?php echo $PHP_SELF;?>" method="post" enctype="multipart/form-data">
<p><strong>Nombre*</strong><br />
<input size="40" <?php if (isset ($flag) && $_POST['nombre']=='') { echo 'class="error"';} else {echo 'class="campo"';} ?> type="text" name="nombre" value="<?php echo $_POST['nombre'];?>" /></p>

<p> </p>

<p><strong>Adjuntar Archivos</strong><br />
<br /><br />
<input type="file" class="multi max-<?=$cantidad_archivos?>" name="files[]" value="<?=$_FILES['files']?>" />
<br /></p>

<p><strong>Mensaje*</strong><br />
<textarea cols="40" rows="10" <?php if (isset ($flag) && $_POST['comentario']=='') { echo 'class="com-error"';} else {echo 'class="com"';} ?> name="comentario"><?php echo $_POST['comentario'];?></textarea></p>
<p><input class="boton" type="submit" name="enviar" value="enviar" onclick="javascript:bar1.showBar();javascript:docu ment.getElementById('espere2').innerHTML =
'...espere por favor, envío en proceso.'"/></p>
</form>

<?php } ?>

<form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">

<div class="row fileupload-buttonbar">
<div class="span7">

<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
</div>

<div class="span5 fileupload-progress fade">

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

<div class="progress-extended"> </div>
</div>
</div>

<div class="fileupload-loading"></div>
<br>

<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
<br>

</div>

<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"><div class="modal-image"></div></div>
<div class="modal-footer">
<a class="btn modal-download" target="_blank">
<i class="icon-download"></i>
<span>Download</span>
</a>
<a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
<i class="icon-play icon-white"></i>
<span>Slideshow</span>
</a>
<a class="btn btn-info modal-prev">
<i class="icon-arrow-left icon-white"></i>
<span>Previous</span>
</a>
<a class="btn btn-primary modal-next">
<span>Next</span>
<i class="icon-arrow-right icon-white"></i>
</a>
</div>
</div>

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td class="preview"><span class="fade"></span></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)% }</span></td>
{% if (file.error) { %}
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td>
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
</td>
<td class="start">{% if (!o.options.autoUpload) { %}
<button class="btn btn-primary">
<i class="icon-upload icon-white"></i>
<span>{%=locale.fileupload.start%}</span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td class="cancel">{% if (!i) { %}
<button class="btn btn-warning">
<i class="icon-ban-circle icon-white"></i>
<span>{%=locale.fileupload.cancel%}</span>
</button>
{% } %}</td>
</tr>
{% } %}
</script>

<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)% }</span></td>
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnail_url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
{% } %}</td>
<td class="name">
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
</td>
<td class="size"><span>{%=o.formatFileSize(file.size)% }</span></td>
<td colspan="2"></td>
{% } %}
<td class="delete">
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
<i class="icon-trash icon-white"></i>
<span>{%=locale.fileupload.destroy%}</span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% } %}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="js/vendor/jquery.ui.widget.js"></script>

<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>

<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>

<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>

<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>

<script src="js/jquery.iframe-transport.js"></script>

<script src="js/jquery.fileupload.js"></script>

<script src="js/jquery.fileupload-fp.js"></script>

<script src="js/jquery.fileupload-ui.js"></script>

<script src="js/locale.js"></script>

<script src="js/main.js"></script>

</div>

</div>
</body>
</html>