Dynamic input layout for gallery upload

Question

Dynamic input layout for gallery upload

Navigation

#1 by (1 votes)

0

Hello,

I'm creating a resource where the mechanism should:

choose an image in the input

When changing the input, a new one is created via js next

Getting there, I need help, because the function only executes on first input, and stop working in the other ... How do I make the change function work on all inputs?

I put the complete code in jsfiddle: link

and the section of js to be helped, I'll put here tbm:

$(".dragNdropUpload_box input").change(function(){                                      

  var create_dragNdropUpload_box =  "<div class='dragNdropUpload_box'>"+
     "<div class='dragNdropUpload_box_input_layout'>"+  
     "<span class='icon far fa-plus-square'></span>"+
     "<span class='text'></span>"+
     "</div><!-- /dragNdropUpload_box_input_layout-->"+
     "<input type='file' name='dragNdropUpload_box[]' />"+
     "</div><!-- /dragNdropUpload_box-->";                                                                                                    


  $(".dragNdropUpload").append(create_dragNdropUpload_box);

  //setTimeout(function(){ 

  var getFileName = $(this).val().split('\').pop();    
  alert(getFileName);   


  $(this).parent().find(".dragNdropUpload_box_input_layout .text").html(getFileName);

  //}, 1000);                   

});//end change

javascript arquivo

asked by anonymous 31.07.2018 / 22:02

1 answer

Transition of screens - Tkinter R histogram with all apparent breaks, hist () function

score 1 · Accepted Answer

As the following elements are dynamic, you need to bind the change handler in document .

So, instead of using $ (". dragNdropUpload_box input"). change (function () {...

Use $ (document) .on ("change", ".dragNdropUpload_box input", (function () {...

Change to:

$(document).on("change", ".dragNdropUpload_box input", (function(){														
	var create_dragNdropUpload_box =  "<div class='dragNdropUpload_box'>"+
"<div class='dragNdropUpload_box_input_layout'>"+
"<span class='icon far fa-plus-square'></span>"+
"<span class='text'></span>"+
"</div><!-- /dragNdropUpload_box_input_layout-->"+
"<input type='file' name='dragNdropUpload_box[]' />"+
"</div><!--/dragNdropUpload_box-->";												 													  
													  							
	$(".dragNdropUpload").append(create_dragNdropUpload_box);
	var getFileName = $(this).val().split('\').pop();	
	$(this).parent().find(".dragNdropUpload_box_input_layout .text").html(getFileName);					
}));

body{
	text-align:center;
}
.dragNdropUpload{
	display:inline-block;
	width:1000px;
	max-width:95%;
	margin:10% 0 0 0;
	padding:20px 0 20px 0;
	border:0px solid #c9ceda;		
}
.dragNdropUpload_box{
	display:inline-block;
	position:relative;
	width:200px;
	height:200px;
	margin:0 20px 0 0;
	border:2px dashed #c9ceda;
	cursor:pointer;
}
.dragNdropUpload_box:hover{
	border:2px dashed #a5adbd;	
}
.dragNdropUpload_box:hover .dragNdropUpload_box_input_layout .icon{
	color:#a5adbd;
}
.dragNdropUpload_box_input_layout{
	display:inline-block;
	width:100%;
	height:100%;
	background-color:transparent;	
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}
.dragNdropUpload_box_input_layout span{
	display:inline-block;
}
.dragNdropUpload_box_input_layout .icon{
	display:inline-block;
	font-size:68px;
	margin:32% 0 0 0;
	color:#c9ceda;	
}
.dragNdropUpload_box_input_layout .text{
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	padding:5px 0 15px 0;
	font-size:15px;
	font-family:arial;
	color:#adb5c7;
}
.dragNdropUpload_box input{
	display:inline-block;
	width:100%;
	height:100%;
	padding:10px 10px 10px 10px;
	background-color:#eee;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	opacity:0;
	cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="dragNdropUpload">
	
	<div class="dragNdropUpload_box">
		<div class="dragNdropUpload_box_input_layout">
			<span class="icon far fa-plus-square"></span>
			<span class="text"></span>
		</div><!-- /dragNdropUpload_box_input_layout-->		
		<input type="file" name="dragNdropUpload_box[]" />		
	</div><!-- /dragNdropUpload_box-->
	
</div><!-- /dragNdropUpload-->