PHP - input type=file

 
Vista:
sin imagen de perfil
Val: 58
Ha aumentado su posición en 2 puestos en PHP (en relación al último mes)
Gráfica de PHP

input type=file

Publicado por Marta (39 intervenciones) el 06/01/2021 20:45:45
Buenas, tengo un botón para insertar una imagen y otro para borrarla, si hace falta.
Cada vez que se quiera cargar una imagen, se crea una capa con los elementos necesarios. No tengo ningún problema en ir insertando tantas imágenes como deseo.
Si borro una imagen y cargo otra, tampoco tengo ningún problema.
El problema está cuando borro una imagen y quiero volver a cargar la misma, que no se visualiza

A continuación el código con el que tengo problema. Este código se genera dinámicamente, es decir, según las acciones de los usuarios, creo unos elements u otros.

Quizás es un poco difícil entender el problema. De todas maneras, muchas gracias

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div style="margin-top:25px;">
       <label for="1">
              <img src="insertaImatge.png">
        </label>
        <input type="file" accept="image/*" class="fotos" id="1" onchange="visFoto(1,this);" style="display:none" ;="">
         <img style="margin-left:20px" src="esborraImatge.png" onclick="esborraFoto(1)">
</div>
// se crea la capa, después de la capa indicada por el parámetro id y se visualiza la foto
function visFoto(id, input) {
    index++;
    if ($("#maquina").val() == "") {
        alert ("PRIMER DE TOT HAS D'INDICAR LA MÀQUINA !!!");
        return;
    }
    var url = document.getElementById(id).files[0].name;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();
        var aNewNode = document.createElement('div');
        aNewNode.id = "divFoto" + index;
        nodeToActOn = document.getElementById('divFoto' + id);
        indexStr = index.toString();
        reader.onload = function (e) {
            aNewNode.innerHTML =
                "<img id='imatge"+indexStr+"' width=400px src='"+ e.target.result +"'>" +
                "<div style='height:5px'></div> " +
                "<label for='"+indexStr+"'><img src='insertaImatge.png'></label>" +
                "<input type='file' accept='image/*' class='fotos' id='"+indexStr+"' onchange='visFoto("+indexStr+",this);' style='display:none'/>" +
                "<img style='margin-top:25px;margin-left:20px' src='esborraImatge.png' onclick='esborraFoto("+indexStr+")'> " +
                "<img style='margin-top:25px;margin-left:20px' src='insertaTexte.png' onclick='afegirText("+indexStr+")'>" +
                "</div>";
            nodeToActOn.after(aNewNode);
            $('#divFoto'+indexStr).show();   // és necessari per si en algun moment he esborrat una foto i estava en aquesta capa
        }
        reader.readAsDataURL(input.files[0]);
        pujaFoto(id, indexStr); // subo la foto al servidor
    }
}
// función cuando se quiere borrar la foto, hago invisible la capa e intento vaciar el input file
function esborraFoto(id) {
    idE = seguentCapa(id);  // esta función devuelve el id de la capa a borrar
    $("#"+idE).val("");
    $('#divFoto'+idE).remove();
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder