18/08/2015, 06:14
|
 | Colaborador | | Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses Puntos: 1012 | |
| Respuesta: [APORTE] efectos sin jquery
Subir Imágenes al servidor --> compatibilidad: todos los navegadores modernos. no incluido ie8 subirArchivosFileReader.html
Código:
<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
position: relative;
}
#tmp_imgs {
list-style: none;
width: 30%;
margin: 0 auto;
padding: 10px 0;
border: 1px solid rgb(177, 184, 177);
display: none;
}
#tmp_imgs > li {
width: 100%;
}
img.thumbnail {
width: 20%;
display: inline-block;
opacity: .4;
background-color: rgb(255, 255, 255);
vertical-align: middle;
}
div.barra {
width: 70%;
height: 20px;
display: inline-block;
margin-left: 5%;
border: 1px solid rgb(172, 166, 166);
border-radius: 6px;
background-color: rgb(201, 49, 104);
}
div.barraProgreso {
width: 0;
height: 100%;
background-color: rgb(118, 196, 47);
border-radius: 6px;
}
span.porcentaje {
position: absolute;
top: 0;
left: 46%;
font: bold .8em Verdana;
color: rgb(255, 255, 255);
}
span.errores {
float: right;
right: 5px;
top: 0;
position: absolute;
font: .7em Tahoma;
color: rgb(201, 49, 104);
}
</style>
<script type="text/javascript">
var uploadFileAjax = new (function() {
var archivosAsubir = [];
var cuantos = 0;
var esteArchivo = [];
function initSubirImg(evt, frm) {
if (archivosAsubir.length == 0) return false;
if (!window.FormData) {
return true;
} else {
evt.preventDefault();
var errores = {
'ko1' : 'El tipo de archivo no está permitido. Se admiten (' + frm.archivos.getAttribute('accept') + ')',
'ko2' : 'El tamaño del archivo supera el máximo permitido'
}
var uri = frm.action;
var ajax = new XMLHttpRequest();
var fData = new FormData();
ajax.open('POST', uri, true);
var i;
ajax.onreadystatechange = function(){
if (ajax.readyState == 4 && ajax.status == 200) {
var respuesta = JSON.parse(ajax.responseText);
var ktal = respuesta.ktal;
for (var n = 0; n < ktal.length; n++) {
if (ktal[n] == 'ok') {
document.querySelectorAll('.barraProgreso')[n].style.width = '100%';
document.querySelectorAll('.porcentaje')[n].textContent = '100%';
document.querySelectorAll('.thumbnail')[n].style.opacity = 1;
} else {
document.querySelectorAll('.barraProgreso')[n].style.width = '0%';
document.querySelectorAll('.porcentaje')[n].textContent = '0%';
document.querySelectorAll('.errores')[n].textContent = errores[ktal[n]];
}
}
}
}
for (i = cuantos; i < archivosAsubir.length; i++) {
fData.append('archivo_'+i, archivosAsubir[i]);
(function(i) {
ajax.upload.addEventListener('progress', function(event) {progreso(event, i)}, false);
})(i);
}
cuantos = i;
ajax.send(fData);
}
}
function progreso(evt, indice) {
var porcentaje = Math.round((evt.loaded / evt.total) * 100) - 1;
document.querySelectorAll('.barraProgreso')[indice].style.width = porcentaje + '%';
document.querySelectorAll('.porcentaje')[indice].textContent = porcentaje + '%';
}
function mostrarImg() {
var inputFile = document.getElementById('archivos');
inputFile.addEventListener('change', function() {
archivosAsubir.push('IE');
return false;
}
if (this.files.length == 0) return false;
var fragListado = document.createDocumentFragment();
Array.prototype.forEach.call(this.files, function(archivo, i) {
esteArchivo[i] = archivo;
if (inputFile.getAttribute('accept').indexOf(esteArchivo[i]['type']) == -1) {alert('El tipo de archivo(s) no está permitido'); inputFile.value = ''; return false;}
if (esteArchivo[i]['size'] > 170000) {alert('El tamaño del archivo(s) supera el máximo permitido'); inputFile.value = ''; return false;}
var lector = new FileReader();
lector.addEventListener('load', function(event) {
var li = document.createElement('li');
li.setAttribute('class', 'lista');
var contenido = fragListado.appendChild(li);
var img = document.createElement('img');
img.setAttribute('src', event.target.result);
img.setAttribute('class', 'thumbnail');
contenido.appendChild(img);
var barra = document.createElement('div');
barra.setAttribute('class', 'barra');
var contenidoBarra = contenido.appendChild(barra);
var barraProgreso = document.createElement('div');
barraProgreso.setAttribute('class', 'barraProgreso')
var porcentaje = document.createElement('span');
porcentaje.setAttribute('class', 'porcentaje');
porcentaje.textContent = '0%';
contenidoBarra.appendChild(barraProgreso);
contenidoBarra.appendChild(porcentaje);
var error = document.createElement('span');
error.setAttribute('class', 'errores');
contenido.appendChild(error);
img.addEventListener('load', function() {
archivosAsubir.push(esteArchivo[i]);
document.getElementById('tmp_imgs').style.display = 'block';
document.getElementById('tmp_imgs').appendChild(fragListado);
}, false);
}, false);
lector.readAsDataURL(esteArchivo[i]);
});
}, false);
}
window.addEventListener('load', mostrarImg, false);
this.initSendImg = initSubirImg;
})();
</script>
</head>
<body>
<form action="subirArchivos.php" method="post" name="f" id="f" enctype="multipart/form-data" onSubmit="return uploadFileAjax.initSendImg(event, this)">
<input type="hidden" name="MAX_FILE_SIZE" value="170000" />
<input type="file" id="archivos" name="archivos" size="10" multiple="multiple" accept="image/jpg, image/jpeg, image/png, image/gif" />
<input type="submit" id="i_submit" value="Subir" />
</form>
<ul id="tmp_imgs"></ul>
</body>
</html>
Código:
<?php
include_once 'subirArchivosResize.php';
$eImg = new editarImg();
if (empty($_FILES['archivos'])) {
foreach ($_FILES as $archivo) {
$eImg->tomaInfo($archivo, array('tipo' => 'relativa', 'valor' => array(30)));
}
header('Content-Type: ' .$eImg->obtenerTipo());
$r = array('ktal' => $eImg->_resp);
echo json_encode($r);
} else {
$eImg->tomaInfo($_FILES['archivos'], array('tipo' => 'relativa', 'valor' => array(30)));
$r = json_encode(array('ktal' => $eImg->_resp));
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
font-size: 100%;
}
div#infoSubida {
width: auto;
height: auto;
position: absolute;
top: 30%;
left: 50%;
margin-left: -25%;
padding: 10px;
border: 1px solid rgb(136, 136, 136);
text-align: center;
}
span#errores {
display: block;
color: rgb(223, 61, 61);
}
span#aciertos {
display: block;
color: rgb(63, 66, 66);
}
img#f {
width: auto;
}
a.redir {
display: block;
color: rgb(55, 182, 121);
text-decoration: none;
}
</style>
<script type="text/javascript">
var errores = {
'ko1' : 'El tipo de archivo no está permitido. Se admiten (<?php echo implode(", ", $eImg->_tiposPermitidos)?>)',
'ko2' : 'El tamaño del archivo supera el máximo permitido'
},
kt = JSON.parse(<?php echo json_encode($r);?>);
(function() {
function muestraResp() {
if (kt.ktal[0] != 'ok') {
document.querySelector('#errores').innerHTML = errores[kt.ktal[0]];
document.querySelectorAll('.redir')[0].innerHTML = 'Intentarlo otra vez --> FILEREADER';
document.querySelectorAll('.redir')[1].innerHTML = 'Intentarlo otra vez --> WEBKITURL';
} else {
continua en el siguiente
Última edición por IsaBelM; 24/09/2015 a las 05:16 |