Để tải lên một hình ảnh, hãy sử dụng FileReader () trong JavaScript. Sau đây là mã JavaScript -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form runat="server">
<input type='file' id="yourImage" />
<img id="chooseImage" src="#" alt="image" />
</form>
<script>
function readImage(fileInput) {
if (fileInput.files && fileInput.files[0]) {
var takingInputFile = new FileReader();
takingInputFile.onload = function(event) {
$('#chooseImage').attr('src', event.target.result);
}
takingInputFile.readAsDataURL(fileInput.files[0]);
}
}
$("#yourImage").change(function() {
readImage(this);
});
</script>
</body>
</html> Để chạy chương trình trên, hãy lưu tên tệp anyName.html (index.html) và nhấp chuột phải vào tệp và chọn tùy chọn Mở bằng máy chủ trực tiếp trong VS trình soạn thảo mã.
Đầu ra
