JSFiddle - React, Tailwind, and code Playground

by ITT Viet Nam

HTML

<input id="files" type="file" value="" />
<div id="preview"></div>

CSS

.thumb
{
	width: 50px;
    height: 50px;
    margin: 0.2em -0.7em 0 0;
}
.remove_img_preview
{
    position:relative;
    top:-25px;
    right:5px;
    background:black;
    color:white;
    border-radius:50px;
    font-size:0.9em;
    padding: 0 0.3em 0;
    text-align:center;
    cursor:pointer;
}
.remove_img_preview:before
{
    content: "×";
}

JavaScript

function handleFileSelect(input) 
{
	if (input.files && input.files[0])
    {
	    var reader = new FileReader();
        reader.onload = (function (e)
        {
	        var span = document.createElement('span');
		    span.innerHTML = ['<img class="thumb" src="',e.target.result, '" title="', escape(e.name), '"/><span class="remove_img_preview"></span>'].join('');
	    document.getElementById('preview').insertBefore(span, null);
	    });
        reader.readAsDataURL(input.files[0]);
    }
}
//su kien thay doi hinh khac                 
$('#files').change(function(evt)
{
    handleFileSelect(evt);
});	
//day la su kien click vao nut x để xóa ảnh
$('#preview').on('click', '.remove_img_preview',function ()
{
	$(this).parent('span').remove();
    $(this).val("");
});