Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/06/2013, 11:09
Canyavall
 
Fecha de Ingreso: septiembre-2005
Mensajes: 10
Antigüedad: 18 años, 7 meses
Puntos: 0
Borrar elemento DIV

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...