Hola amigos de entre desarrolladores :)
Estoy usando el plugin JQuery Upload File de hayageek, obtenido desde: http://hayageek.com/docs/jquery-upload-file.php.
He intentado usar el <div> que carga los archivos dentro de un <form> para poder enviar otra información junto con los archivos, tengo la opción autoSubmit: false, y cuando doy click para enviar el formulario llamo la función startUpload();
Mi problema es que al momento de dar click para enviar el formulario sólo se envían los <input> del formulario, y los archivos cargados no son enviados, al lado del servidor tengo el siguiente código para saber si llegan los archivos y los campos del formulario:
print_r($_POST); pring_r($_FILES);
Si cambio la opción autoSubmit: true, si se envían los archivos junto con los campos del formulario.
Nota: la alerta dentro de onSubmit no es ejecutada.
De ante mano muchas gracias por su tiempo y colaboración :)
A continuación les presento mi código:
<--------------------------------------------- HTML ------------------------------------------->
<form class="form-horizontal" id="form-editar-slider-ajax" method="post">
<input type="hidden" name="idImagen" id="idImagen" readonly="readonly">
<div class="form-group">
<label for="inputName" class="control-label col-xs-2">Titulo:</label>
<div class="col-xs-10">
<input type="name" id="tituloImagen" name="tituloImagen" class="form-control" placeholder="Titulo">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2">Imagen:</label>
<div class="col-xs-10" id="cargador">
<div id="fileuploader">Cargar imagen</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-8">
<button type="submit" id="btn-editar-slider-ajax" class="btn btn-success">Guardar Cambios</button>
</div>
</div></form>
<--------------------------------- JAVASCRIPT - PLUGIN ------------------------------------>
<script type="text/javascript">
var uploadObj = $("#fileuploader").uploadFile({
url: "../controller/editarSliderAjax", //url donde se enviará la petición
multiple: false, //defino que no se puedan arrastrar y soltar mas de 1 archivo
allowedTypes: "png,jpg,jpeg", // extensiones permitidas
fileName: "myfile", //nombre del archivo a enviar por $_Files
showDelete: false, //mostrar botón eliminar
showDone: false, //ocultar botón de Hecho
showProgress: true, //mostrar barra de progreso
showPreview: true, //mostrar previsualización de las imagenes a cargar
autoSubmit: false, //deshabilitar el envio del archivo automaticamente, para poder ser enviado se utiliza la función startUpload()
showStatusAfterSuccess: true, //mostrar estado despues de haber cargado correctamente las imagenes
maxFileCount: 1, //número máximo de archivos a subir
maxFileSize: 3145728, //tamaño máximo permitido de los archivos en bytes, en MB: 3MB
maxFileCountErrorStr: "Acción no permitida, el número máximo de archivos a subir es: ", //string que aparece al momento de tener un error del número máximo de archivos
dragDropStr: "<span><b> Arrastra & Suelta los Archivos</b></span>", //string que aparece al momento de tener un error de arrastrar y soltar varios archivos cuando la opción multiple está en false
sizeErrorStr: "Acción no permitida, el tamaño máximo del archivo es: ", //string que aparece cuando los archivos superan el tamaño máximo permitido
extErrorStr: "Acción no permitida, las extensiones válidas son: ", //string que aparece cuando existe un error en las extensiones de los archivos a cargar
cancelStr: "Cancelar", //string del botón cancelar
uploadButtonClass:"btn btn-info", //clase del botón de carga, se definió una clase de bootstrap
dragdropWidth: "100%", //defino el ancho del area donde se arrastra y sueltan los archivos
statusBarWidth: "100%", //defino el acho de la barra de estado.
//Datos del formulario dinámico, estos son los datos que se envian además de las imagenes, se recuperan con
// $_POST['ID_ESPECIFICADO']
dynamicFormData:function()
{
var id = $("#idImagen").val(); //capturo el id de la imagen cargado en el input oculto
var titulo = $("#tituloImagen").val(); //capturo el titulo cargado en el input.
// los datos que se van a enviar
var data = {
idImagen: id, //id de la imagen
tituloImagen: titulo //titulo de la imagen
};
alert(data['idImagen']);
alert(data['tituloImagen']);
return data; //debo retornar data para poder que se envien junto con las imagenes.
},
onSuccess:function(files,data,xhr,pd) //función que se llama despues de haber subido los archivos.
{
$("#mensaje").html(data); // Mostrar la respuestas del script PHP.
},
onSubmit:function()
{
alert("Envié Archivos");
}
});
// al dar clic en guardar cambios al momento de editar una imagen del slider
// ejecuto el plugin uploadFile.
$('btn-editar-slider-ajax').click(function(){
uploadObj.startUpload();
});</script>