<?php
session_start ();
$destino = "../imagenes/publicaciones/";
if ( (isset($_GET['action']) && $_GET['action'] === 'listFotos') || ( isset($_GET['action2']) && $_GET['action2'] === 'listFotos') ) {
//if ($_GET['action'] == 'listFotos'){
$i = 1;
while($i < count($_SESSION["Nombre_foto"]))
{
echo '<li>
<a href="javascript:;" id="'.$i.'">
<img src="delete.png" />
</a>
<img src="'.$_SESSION["Nombre_foto"][$i].'" />
<span>'.$_SESSION["Nombre_foto"].'</span>
</li>';
}
}else if ( (isset($_GET['action']) && $_GET['action'] === 'eliminar') || ( isset($_GET['action2']) && $_GET['action2'] === 'eliminar') ) {
//else if($_GET['action'] == 'eliminar'){
unlink($_SESSION["Nombre_foto"][($_GET['id']-1)]);
unset($_SESSION["Nombre_foto"][($_GET['id']-1)]);
}else
{
$filetype = $_FILES['image']['type'];
$type = substr($filetype, (strpos($filetype,"/"))+1);
$types=array("jpeg","gif","png");
if(in_array($type, $types)){
if(isset($_FILES['image'])){
$nombre = $_FILES['image']['name'];
$temp = $_FILES['image']['tmp_name'];
$nombre_completo = $destino.rand(0,1000)."-".$nombre;
if(move_uploaded_file($temp, $nombre_completo))
{
$_SESSION["Nombre_foto"][count($_SESSION["Nombre_foto"])] = $nombre_completo;
}
echo '<li>
<a href="javascript:;" id="'.count($_SESSION["Nombre_foto"]).'">
<img src="delete.png" /></a><img src="'.$nombre_completo.'" />
<span>'.$nombre.'</span>
</li>';
}
}else{
echo "Solo imagenes jpg,png,gif";
}
}
?>
if(isset($_REQUEST['registrar'])){
$foto1 = "";
if(isset($_SESSION["Nombre_foto"][0])){
$foto27 = $_SESSION["Nombre_foto"][0];
}
$foto2 = "";
if(isset($_SESSION["Nombre_foto"][1])){
$foto28 = $_SESSION["Nombre_foto"][1];
}
$foto3 = "";
if(isset($_SESSION["Nombre_foto"][2])){
$foto29 = $_SESSION["Nombre_foto"][2];
}
$foto4 = "";
if(isset($_SESSION["Nombre_foto"][3])){
$foto30 = $_SESSION["Nombre_foto"][3];
}
{
$insertar = $conexion->query("INSERT INTO `publicacion` (`img1`, `img2`, `img3`, `img4`) VALUES ('$foto1', '$foto2', '$foto3', '$foto4')");
$_SESSION["Nombre_foto"] = array();
echo ("<script language='javascript'>
alert ('Datos guardados exitosamente...')
location.href = 'index.php';
</script>");
}
}
else
{
for($i = 0; $i < count($_SESSION["Nombre_foto"]); $i++){
unlink('./imagenes/publicaciones/'.$_SESSION["Nombre_foto"][$i]);
}
$_SESSION["Nombre_foto"] = array();
echo ("<script language='javascript'>
alert ('Debe ingresar todos los datos obligatorios...')
location.href = 'publicacion.php';
</script>");
}
<form id="formElem" action="publicacion.php" target="_self" method="post">
<fieldset class="step">
<fieldset class="step">
<legend>Agregar Imágenes <span class="flecha">→</span> (+) Fotos</legend>
<div id="content2"> <a href="javascript:;" id="upload">Subir Foto</
<ul id="gallery">
<!-- Cargar Fotos -->
</ul>
</div>
</fieldset>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxupload.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var button = $('#upload'), interval;
new AjaxUpload(button,{
action: './php/procesa.php',
name: 'image',
onSubmit : function(file, ext){
// cambiar el texto del boton cuando se selecicione la imagen
button.text('Subiendo');
// desabilitar el boton
this.disable();
interval = window.setInterval(function(){
var text = button.text();
if (text.length < 11){
button.text(text + '.');
} else {
button.text('Subiendo');
}
}, 200);
},
onComplete: function(file, response){
button.text('Subir Foto');
window.clearInterval(interval);
//Habilitar boton otra vez
this.enable();
//Añadiendo las imagenes a mi lista
if($('#gallery li').length == 0){
$('#gallery').html(response).fadeIn("fast");
$('#gallery li').eq(0).hide().show("slow");
}else{
$('#gallery').prepend(response);
$('#gallery li').eq(0).hide().show("slow");
if($('#gallery li').length == 4){
$("#upload").hide("slow");
}
}
}
});
//Listar fotos que hay en mi tabla
$("#gallery").load("./php/procesa.php?action=listFotos");
//Eliminar
$("#gallery li a").live("click",function(){
var a = $(this)
$.get("./php/procesa.php?action=eliminar",{id:a.attr("id")},function(){
a.parent().fadeOut("slow");
a.parent().remove();
$("#upload").show(1000);
})
})
});
</script>
<style>
span.reference{
position:fixed;
left:5px;
top:5px;
font-size:10px;
text-shadow:1px 1px 1px #fff;
}
span.reference a{
color:#555;
text-decoration:none;
text-transform:uppercase;
}
span.reference a:hover{
color:#000;
}
h1{
color:#ccc;
font-size:36px;
text-shadow:1px 1px 1px #fff;
padding:20px;
}
</style>
<style type="text/css" media="screen">
#slider {
width: 800px; /* importante! debe ser del mismo ancho de la imagen */
height: 180px; /* importante! debe ser de la misma altura de la imagen */
position: relative; /* importante! */
overflow: hidden; /* importante! */
margin: 0 260px;
}
#sliderContent {
width: 800px; /* importante! debe ser igual a la imagen en ancho y amplitud */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
margin: -30px 75px;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: transparent;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}
</style>
<style type="text/css">
#content2{
width:500px;
margin:20px auto;
height:250px;
border:6px solid #F3F3F3;
padding-top:10px;
overflow-y:auto
}
#upload{
padding:12px;
font:bold 12px Arial, Helvetica, sans-serif;
text-align:center;
background:#f2f2f2;
color:#3366cc;
border:1px solid #ccc;
width:150px;
display:block;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin:0 auto;
text-decoration:none
}
#gallery{
list-style:none;
margin:20px 0 0 0;
padding:0
}
#gallery li{
display:block;
float:left;
width:155px;
height:160px;
background:#9AF099;
border:1px solid #093;
text-align:center;
padding:6px 0;
margin:5px 0 5px 14px;
position:relative
}
#gallery li img{
width:145px;
height:140px
}
#gallery li a{
position:absolute;
right:10px;
top:10px
}
#gallery li a img{ width:auto; height:auto}
</style>
<input type="file" id="cmdExaminar" value="Examinar..." multiple accept=".jpg" />
<table id="tblPreviews"></table>
<script>document.getElementById('cmdExaminar').addEventListener('change',function(){
tblPreviews.innerHTML='';
for(i=0, t=this.files.length; i<t; i++){
if(this.files[i].type=="image/jpeg"){
preview(i)
}
}
});
function preview(i){
var file = document.getElementById('cmdExaminar').files[i];
var fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event){
var celView = document.createElement('td');
var img = document.createElement('img');
img.style.maxWidth='200';
img.style.maxHeight='200';
img.src = event.target.result;
celView.appendChild(img);
var celFile = document.createElement('td');
celFile.appendChild(document.createTextNode(file.name));
var row = document.createElement('tr');
row.appendChild(celView);
row.appendChild(celFile);
var tblPreviews = document.getElementById('tblPreviews');
tblPreviews.appendChild(row);
}
}</script>
for(i=0; i<6; i++){
galeria = document.getElementById('galeria');
item = document.createElement('li');
link = document.createElement('a');
imgDel = document.createElement('img');
imgPic = document.createElement('img');
txtPic = document.createElement('span');
txtPic.appendChild(document.createTextNode(file.name));
link.appendChild(imgDel);
item.apppendChild(link);
item.appendChild(imgPic);
item.appendChild(txtPic);
galeria.appendChild(item);