Hola a tod@s, antes de nada quiero deciros que es la primera vez que hago algo en javascript, soy programador php, html, java y abap, pero nunca antes habia tocado nada de javascript...
Actualmente estoy buscando - generando un código que me muestre una imagen seleccionada y la suba al sistema, por ahroa todo funciona perfecto, el único problema es que si selecciono una imagen, me la enseña, si luego selecciono otra, me enseña las dos...
Entiendo y veo que es por que al crear el nuevo elemento, lo único que hace, es crear tags <div>, uno para cada imagen, entonces veo que, o sustituyo el elemento creado o lo elimino y vuelvo a crearlo..., me he vuelto loco con el replacechild y el removechild... pero no consigo que me lo sustituya... os paso el trozo de código que tengo y a ver si me podéis decir donde falla.
Este es el código de prueba que uso para hacer las pruebas...
Código:
<?php
if (isset($_FILES['img1']['name']) || isset($_FILES['img2']['name'])) {
move_uploaded_file($_FILES['img1']['tmp_name'], "moved/mierda.jpg");
copy("uploads/img1.jpg", "moved/img1.jpg");
unlink("uploads/img1.jpg");
move_uploaded_file($_FILES['img2']['tmp_name'], "moved/mierda2.jpg");
copy("uploads/img2.jpg", "moved/img2.jpg");
unlink("uploads/img2.jpg");
}
?>
<form enctype="multipart/form-data" method="post" action="preres.php">
<input type="text" id="title" name="title"><br>
<input type="file" id="img1" name="img1"/>
<output id="previmg1"></output>
<input type="file" id="img2" name="img2" />
<output id="previmg2"></output>
<div class="row">
<input type="submit" value="Upload" />
</div>
</form>
<script>
function fileSelect(evt) {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = evt.target.files;
var file;
var targetid = evt.target.id;
var targetchild = 'prev' + targetid;
file = files[0];
reader = new FileReader();
reader.onload = (function (tFile) {
return function (evt) {
var div = document.createElement('div');
div.innerHTML = '<img style="width: 90px;" id = "thumb' + targetid + '" src="' + evt.target.result + '" />';
if (document.getElementById('thumb' + targetid) == null){
document.getElementById(targetchild).appendChild(div);
} else {
************************
Has aqui llega perfecto, lo que viene después es lo que no me funciona...
************************
var el = document.getElementById(targetid);
var padre = el.parentnode;
padre.removeChild(div);
*************************
}
};
}(file));
reader.readAsDataURL(file);
resizeAndUpload(file, targetid);
} else {
alert('The File APIs are not fully supported in this browser.');
}
}
function resizeAndUpload(file, name) {
var reader = new FileReader();
reader.onloadend = function() {
var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function() {
var MAX_WIDTH = 200;
var MAX_HEIGHT = 200;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, tempW, tempH);
var dataURL = canvas.toDataURL("image/jpeg");
var xhr = new XMLHttpRequest();
var field= document.getElementById(name);
field.value= field.defaultValue;
xhr.open('POST', 'resizer.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var data = 'nameimg=' + name + '&image=' + dataURL;
xhr.send(data);
}
}
reader.readAsDataURL(file);
}
document.getElementById('img1').addEventListener('change', fileSelect, false);
document.getElementById('img2').addEventListener('click', clean, false);
</script>
Muchísimas gracias de antemano por la ayuda!
P.D: He mirado miles de artículos, consejos, demos.... debo ser muy cazurro pero no lo se hacer funcionar...