Xem trước ảnh trước và sau khi tải lên bằng HTML và JavaScript

Để xem trước hình ảnh ngay khi người dùng chọn file (trước khi tải lên server), bạn có thể sử dụng FileReader API kết hợp với jQuery.

Mã HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="form1">
  <input type='file' id="demo" />
  <img id="myid" src="#" alt="Ảnh xem trước" />
</form>

Mã jQuery

function display(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(event) {
      $('#myid').attr('src', event.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$("#demo").change(function() {
  display(this);
});

Giải thích

• Khi người dùng chọn file, sự kiện change của input file được kích hoạt.
• FileReader.readAsDataURL() đọc file và chuyển thành chuỗi Data URL (base64).
• Khi tải xong (onload), gán chuỗi Data URL vào thuộc tính src của thẻ <img> để hiển thị xem trước.

Cách này không yêu cầu tải file lên server, giúp người dùng kiểm tra ảnh ngay lập tức.