Validate dữ liệu ảnh được upload với Javascript thuần

Hôm nay mình sẽ hướng dẫn các bạn các ràng buộc ảnh được tải lên từ local, cụ thể là validate định dạng, chỉ cho upload những file đuôi là .jpg .jpeg .png .gif, còn các file đuôi khác thì không cho phép upload.

Kết quả mong muốn

• Viết chức năng upload ảnh từ local chỉ bằng Javascript thuần
• Ràng buộc được định dạng ảnh
• Preview ảnh sau khi upload

Tiến hành

Để tiến hành làm chức năng này, mình cấu trúc theo 3 file: index.html, style.css, script.js cụ thể các code như sau:

HTML

<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>

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]);
        }
    }
}

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;
}

Preview 

Các bạn xem và test kết quả dưới đây:

Lời kết

Các bước thực hiện rất đơn giản, mọi thắc mắc, các bạn comment ở dưới để được giải đáp.

Mong bài viết hữu ích, chúc các bạn thành công.

by Hiếu Quốc