Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Borrar elemento DIV

Estas en el tema de Borrar elemento DIV en el foro de Javascript en Foros del Web. Hola a [email protected], antes de nada quiero deciros que es la primera vez que hago algo en javascript, soy programador php, html, java y abap, ...
  #1 (permalink)  
Antiguo 01/06/2013, 11:09
 
Fecha de Ingreso: septiembre-2005
Mensajes: 10
Antigüedad: 13 años, 7 meses
Puntos: 0
Borrar elemento DIV

Hola a [email protected], 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...
  #2 (permalink)  
Antiguo 01/06/2013, 13:35
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 9 años
Puntos: 154
Respuesta: Borrar elemento DIV

...podes optimar esa parte de codigo de esta forma...no es parentnode, es parentNode...

Código Javascript:
Ver original
  1. var elem = document.getElementById(targetid);
  2. elem.parentNode.removeChild(elem);

--si sigue sin funcionar es por que tal vez, targetid es undefined, deberias hacer un console.log para ver que valor tiene targetid, en caso de ser undefined, estas pasando de forma errada el valor de dicha variable
  #3 (permalink)  
Antiguo 02/06/2013, 09:18
 
Fecha de Ingreso: septiembre-2005
Mensajes: 10
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: Borrar elemento DIV

Pues si, tenias razon, llamaba a un indefinido, con este cacho lo he arreglado, gracias!!

Código:
 var files = evt.target.files; 
            var file;
            var targetid = evt.target.id;
            var targetparent = 'prev' + targetid;
            var targetchild = "thumb" + targetid;
            var elparent = document.getElementById(targetparent);
            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(targetchild) == null){
                       elparent.appendChild(div);
                    } else {                        
                         var el = document.getElementById(targetchild);
                         var padre = el.parentNode; 
                         padre.replaceChild(div,el);                   
                    }

                };

Etiquetas: elemento, funcion, html, input, php, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:08.