¿Alguien por aquí sabe JavaScript? Veréis, resulta que estoy teniendo un problema con un
upload de imágenes que he estado intentando hacer. Para hacerlo, me he ayudado de páginas externas, pero claro, para adaptarlo a lo que yo quería hacer exactamente he tenido que modificar cosas y no sé si no va a causa de eso, o es cosa del servidor.
En mi
mini-web (escrita casi toda en HTML), dentro de
head, he puesto lo siguiente en CSS:
<style>
.container {
width: 500px;
margin: 0 auto;
}
.progress_outer {
border: 1px solid #000;
}
.progress {
width: 20%;
background: #DEDEDE;
height: 20px;
}
</style>
Luego, más abajo, he puesto lo que sería el
upload:
<div class='container'>
<p>
Select File: <input type='file' id='_file'> <input type='button' id='_submit' value='Upload!'>
</p>
<div class='progress_outer'>
<div id='_progress' class='progress'></div>
</div>
</div>
<script src='upload.js'></script>
Claro está, hay un archivo PHP, que es el que he sabido más o menos manejar poniendo lo siguiente:
<?php
function outputJSON($msg, $status = 'error'){
header('Content-Type: application/json');
die(json_encode(array(
'data' => $msg,
'status' => $status
)));
}
if($_FILES['SelectedFile']['error'] > 0){
outputJSON('Ha ocurrido un error al subir la imagen.');
}
if(!getimagesize($_FILES['SelectedFile']['tmp_name'])){
outputJSON('Por favor, asegúrate de que estás subiendo una imagen.');
}
if($_FILES['SelectedFile']['type'] != 'image/png' or $_FILES['SelectedFile']['type'] != 'image/jpg' or $_FILES['SelectedFile']['type'] != 'image/gif'){
outputJSON('El servidor no soporta este tipo de imágenes, recuerda que únicamente puedes subir imágenes con formato PNG, JPG y GIF.');
}
if(file_exists('upload/' . $_FILES['SelectedFile']['name'])){
outputJSON('El nombre del archivo que has intentado subir ya existe. Por favor, prueba con otro nombre.');
}
if(!move_uploaded_file($_FILES['SelectedFile']['tmp_name'], 'upload/' . $_FILES['SelectedFile']['name'])){
outputJSON('Error al subir el archivo. Por favor, inténtalo más tarde.');
}
outputJSON('El archivo ha sido subido correctamente al servidor.' . 'upload/' . $_FILES['SelectedFile']['name'] . '".', 'success');
Creo que está bien, pero no voy a decir que lo está, porque no lo sé seguro. La duda que tengo es si el siguiente archivo programado en JavaScript está bien:
var _submit = document.getElementById('_submit'),
_file = document.getElementById('_file'),
_progress = document.getElementById('_progress');
var upload = function(){
if(_file.files.length === 0){
return;
}
var data = new FormData();
data.append('SelectedFile', _file.files[0]);
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
if(request.readyState == 4){
try {
var resp = JSON.parse(request.response);
} catch (e){
var resp = {
status: 'error',
data: 'Unknown error occurred: [' + request.responseText + ']'
};
}
console.log(resp.status + ': ' + resp.data);
}
};
request.upload.addEventListener('progress', function(e){
_progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
}, false);
request.open('POST', 'upload.php');
request.send(data);
}
_submit.addEventListener('click', upload);
Si los tres están bien programados, entonces debe ser cosa del servidor. Pero no lo entiendo, porque he conseguido subir algunas imágenes correctamente, lo que pasa es que normalmente, suele quedarse la barra de progreso en el final y no sube nada.
¡Gracias de antemano por vuestra ayuda!
