JSFiddle - React, Tailwind, and code Playground

by quochieuu

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hướng dẫn tạo upload ảnh bằng Javacript thuần - quochieu.com</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">

	<!-- Import Boostrap css, js, font awesome here -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  

	<!-- Icon from Font Awesome -->
    <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">  

	<!-- Jquery bootstrap 4 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="wrapper">

		<form id="uploadImg">
		  <div class="form-group">
		        <label for="exampleInputEmail1">Image<span style="color: red">*</span></label>
		        <input type="file" class="form-control" id="inputImg" onchange="return fileValidation()">
		        <div id="previewImg"></div>
		  </div>

		  <div class="modal-footer">
	            <div id="submitButtons">
	      	         <button data-dismiss="modal" aria-lable="Close" type="submit" class="btn btn-info" onclick="uploadImg()">Upload</button>
	      	    </div>
	      </div>
        </form>
		
	</div>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Roboto, Arial, sans-serif;
}

form#uploadImg {
    width: 500px;
    background: #fff;
    padding: 20px;
    margin: 30px auto;
    box-shadow: 4px 4px 10px 4px #cccccc36;
    border-radius: 5px;
}

JavaScript

function fileValidation() {
    var fileInput = document.getElementById('inputImg');
    var filePath = fileInput.value; //lấy giá trị input theo id
    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i; //các tập tin cho phép
    //Kiểm tra định dạng
    if (!allowedExtensions.exec(filePath)) {
        alert('Vui lòng upload các file có định dạng: .jpeg/.jpg/.png/.gif only.');
        fileInput.value = '';
        return false;
    } else {
        //Image preview
        if (fileInput.files && fileInput.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('previewImg').innerHTML = '<img style="width:100px;height:auto;margin: 0 auto;" src="' + e.target.result + '"/>';
            };
            reader.readAsDataURL(fileInput.files[0]);
        }
    }
}