JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<form id="formulir" method="post"  enctype="multipart/form-data" action="config-template-ecomerce.php">
		title-file<input  name="title" type="text" id="title"/><br>		
		color-one<input  name="color-one" type="text" id="color-one"/><br>
		
		<img id="uploadPreview" style="width: 100px;" /><br>
		
		image<input type="file" name="image1" id="image1"/><br>
		
        <img id="image_preview1" src="#" style="width:300px;" />
        <img id="image_preview2" src="#" style="width:300px;" />
        <img id="image_preview3" src="#" style="width:300px;" />
        <img id="image_preview4" src="#" style="width:300px;" /><br>
		
		submit<input type="submit" name="button" id="button" value="Submit" />
		
	</form>

JavaScript

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    $("#image1").change(function(){
        readURL(this);
    });



    function readURL1(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#blah1').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    $("#image2").change(function(){
        readURL1(this);
    });


$(function(){
    $('#image1').on('click',function(){
        			var r= $('<input type="file" name="image2" id="image2"/>')
				.on('click',function(){
        			var r= $('<input type="file" value="new button" name="third-image" id="third-image"/>')
				.on('click',function(){
        			var r= $('<input type="file" value="new button" name="fourth-image" id="fourth-image"/>');
        $("form").append(r);
    });;
        $("form").append(r);
    });
        $("form").append(r);
    });
});