the JavaScript Does not execute the input function type file

Question

the JavaScript Does not execute the input function type file

Navigation

#1 by (0 votes)

0

I have an error that I could not find how to solve it.

I have an input with a class and a js and a special css iborrainputfile that makes the input look nice.

The problem is that when I load it from the html it works perfectly, but when I generate it through js it does not work (this, because I do not know how many images the user wants to upload), I already made the tests and created the second element well with his name and id perfectly, but I do not upload the image to the label.

/////////////////// Creo que el error pueda provenir de esta funcion, pero su sintaxis es desconocida para mi y no se como solucionarlo ////////////////////////

'use strict';

;( function ( document, window, index )
{
	var inputs = document.querySelectorAll( '.inputfile' );
	Array.prototype.forEach.call( inputs, function( input )
	{
		var label	 = input.nextElementSibling,
			labelVal = label.innerHTML;

		input.addEventListener( 'change', function( e )
		{
			var fileName = '';
			if( this.files && this.files.length > 1 )
				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
			else
				fileName = e.target.value.split( '\' ).pop();

			if( fileName )
				label.querySelector( 'span' ).innerHTML = fileName;
			else
				label.innerHTML = labelVal;
		});
	});
}( document, window, 0 ));


var contTitulo=0;
var numeroObs=0;
var numeroFoto=0;


function crearFoto() {
    var nuevaFoto="";
    nuevaFoto +="<div class='col-md-6' style='margin-bottom: 10px;''>";
    nuevaFoto +="<div class='conten'>";
    nuevaFoto +=   "<input style='text-align: center;' type='text' name='pieFoto_["+(contTitulo)+"]["+(numeroObs)+"]["+(numeroFoto+1)+"]' class='form-control' placeholder='Ingrese Pie-Foto'>";
    nuevaFoto +=    "<input type='file' name='file_["+(contTitulo)+"]["+(numeroObs)+"]["+(numeroFoto+1)+"]' id='file_"+(contTitulo)+""+(numeroObs)+""+(numeroFoto+1)+"' class='inputfile inputfile-7'>";
    nuevaFoto +=    "<label for='file_"+(contTitulo)+""+(numeroObs)+""+(numeroFoto+1)+"'>";
    nuevaFoto +=    "<span class='iborrainputfile'>Ninguna Seleccion</span>";
    nuevaFoto +=    "<strong>";
    nuevaFoto +=    "<svg xmlns='http://www.w3.org/2000/svg' class='iborrainputfile' width='20' height='17' viewBox='0 0 20 17'><path d='M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z'></path></svg>";
    nuevaFoto +=    "Seleccione Foto</strong>";
    nuevaFoto +=    "</label>";
    nuevaFoto +="</div>";
    nuevaFoto +="</div>";

    $('#divObs_'+contTitulo+''+numeroObs).append(nuevaFoto);
    numeroFoto = numeroFoto +1;
}

/**********File Inputs**********/
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 100%;
    height: 40px;
    font-size: 1.25rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

.JJinputfile {
	font-size:16px; 
	font-weight:normal;
	font-family: 'Lato';
}


/* style 7 */

.inputfile-7 + label {
    color: #ec9b1b;
}

.inputfile-7 + label {
    border: 1px solid #ec9b1b;
    background-color: #fff;
    padding: 0;
}

.inputfile-7:focus + label,
.inputfile-7.has-focus + label,
.inputfile-7 + label:hover {
    border-color: #d47e03;
}

.inputfile-7 + label span,
.inputfile-7 + label strong {
    padding: 0.625rem 1.25rem;
}

.inputfile-7 + label span {
    width: 200px;
    min-height: 2em;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
}

.inputfile-7 + label strong {
    height: 100%;
    color: #fff;
    background-color: #ec9b1b;
    display: inline-block;
}

.inputfile-7:focus + label strong,
.inputfile-7.has-focus + label strong,
.inputfile-7 + label:hover strong {
    background-color: #d47e03;
}

@media screen and (max-width: 50em) {
	.inputfile-7 + label strong {
		display: block;
	}
}
.conten{
    border: 2px solid #ec9b1b;
    background-color: #fff;
    padding: 0;
    border-radius: 5px;

}
/**********End File Inputs**********/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="titulos_0" class="col-md-12" style="margin-bottom: 15px; border: 1px solid #ccc; padding-top: 15px; padding-bottom: 15px ;">
<!-- contenedor de los titulos -->
  <div class="col-md-12">
      <label for="titulo_0" class="col-md-9 control-label" >Agregue un titulo</label>
      <label id="masContenido_0"  for="titulo" class="col-md-3 control-label masContenido_0" >Agregue Contenido</label>
    <div class="col-md-10">
      <input type="text" id="titulo_0" name="titulo_[0]" class="col-md-10 form-control ">
    </div>
  </div>
<!-- espacio para las fots -->
  <div id="divObs_00" class="col-md-12" style="margin-top: 10px;">
      
    <div class="col-md-6" style="margin-bottom: 10px;" >
      <div class="conten">
        <input style="text-align: center;" type="text" name="pieFoto_[0][0][0]" class="form-control" placeholder="Ingrese Pie-Foto">

        <input type="file" name="file_[0][0][0]" id="file_000" class="inputfile inputfile-7">
        <label for="file_000">
        <span class="iborrainputfile">Ninguna Seleccion</span>
        <strong>
        <svg xmlns="http://www.w3.org/2000/svg" class="iborrainputfile" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg>Seleccione Foto</strong>
        </label>
      </div>
    </div>
       
  </div>
  <div id="masFotos_00" style="text-align: right; margin-right: 15px; ">
    <label class="control-label">Agregar mas Fotos</label>
    <button id="masFotos_00"  type="button" class="btn btn-success" onclick="crearFoto()"><span class='glyphicon glyphicon-plus'></span></button>
  </div>
<!-- Observvaciones -->
  <div class="col-md-12">
    <label for="observaciones_00" class="col-md-12 control-label" >Observaciones</label>
    <input type="text" name="observaciones_[0][0]" class="form-control">
  </div>
</div>

The problem I think lies in the function of js that I do not know how to do to activate when the new input is created by js ...

I hope I have been clear and that you can help me ...

javascript jquery html5 php

asked by srJJ 13.11.2018 в 15:16

source

1 answer

Error 404, laravel does not get a view with some data sent Date conversion problem using Excel VBA

score 0 · Answer 1

The problem is the moment you assign the event handler change . When you start your page, go through all the <input> and assign them the function that will fire when they change, the problem is that any <input> that is added to the HTML after this will not have that function.

One way would be to add the function to you just add the element to the page, but I offer you a better alternative, handle it with a single event. Instead of adding a function for each element you can use a container for all <input> and this would be the one that would have the function, then any change that occurs inside the container will be handled. Here is an example:

var contenedor = $('#contenedor');

$('#btn-agregar').click(function() {
  contenedor.append('<input />');
});

contenedor.on('change', 'input' /* selector */, function(e) {
  // Debido al selector en el segundo parámetro
  // solo se manejarán los eventos disparados por <input>
  console.log(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contenedor">
  <input />
</div>
<button id="btn-agregar">agregar</button>