Hiển thị ảnh nhỏ trước khi upload
Chắc chắn rằng các bạn làm web đã từng ít nhất 1 lần viết một ứng dụng web có up hình ảnh lên trên web. Các bạn mong muốn người dùng có thể xem trước hình ảnh trước khi lưu trữ dữ liệu.
Để giải quyết vấn đề này có 2 cách:
- Cách 1: Upload file ảnh lên server (Sử dụng ajax) vào 1 thư mục tạm, sau khi quá trình submit form thành công các bạn viết mã chuyển tập tin vừa upload vào thư mục hình chính thức và xóa tập tin cũ khi đã lưu trữ quá 1 ngày trở lên. Hoặc là lưu trực tiếp lên server chấp nhận sự dư thừa dữ liệu.
- Cách 2: Sử dụng javascript để lấy hình ảnh nhỏ hiện lên trước ngay tại client mà không cần tương tác đến webserver. Cách này tương đối dễ dàng, nhanh chóng tiết kiệm tài nguyên.
Sau đây là bài viết hưỡng dẫn các bạn tạo tính năng xem ảnh nhỏ trước khi upload bằng javascript + jQuery:
Bước 1: Thêm thư viện jquery vào thẻ head trang web của bạn
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
Bước 2: Thêm đoạn script sau đây sau script thư viện jquery
<script type="text/javascript">
function readURL(input,thumbimage) {
if (input.files && input.files[0]) { //Sử dụng cho Firefox - chrome
var reader = new FileReader();
reader.onload = function (e) {
$("#thumbimage").attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
else { // Sử dụng cho IE
$("#thumbimage").attr('src', input.value);
}
$("#thumbimage").show();
$('.filename').text($("#uploadfile").val());
$('.Choicefile').css('background', '#C4C4C4');
$('.Choicefile').css('cursor', 'default');
$(".removeimg").show();
$(".Choicefile").unbind('click'); //Xóa sự kiện click trên nút .Choicefile
}
$(document).ready(function () {
$(".Choicefile").bind('click', function () { //Chọn file khi .Choicefile Click
$("#uploadfile").click();
});
$(".removeimg").click(function () {//Xóa hình ảnh đang xem
$("#thumbimage").attr('src', '').hide();
$("#myfileupload").html('<input type="file" id="uploadfile" onchange="readURL(this);" />');
$(".removeimg").hide();
$(".Choicefile").bind('click', function () {//Tạo lại sự kiện click để chọn file
$("#uploadfile").click();
});
$('.Choicefile').css('background','#0877D8');
$('.Choicefile').css('cursor', 'pointer');
$(".filename").text("");
});
})
</script>
Bước 3: Code css
<style type="text/css">
.Choicefile
{
display:block;
background:#0877D8;
border:1px solid #fff;
color:#fff;
width:100px;
text-align:center;
text-decoration:none;
cursor:pointer;
padding:5px 0px;
}
#uploadfile,.removeimg
{
display:none;
}
#thumbbox
{
position:relative;
width:100px;
}
.removeimg
{
background: url("http://png-3.findicons.com/files/icons/2181/34al_volume_3_2_se/24/001_05.png") repeat scroll 0 0 transparent;
height: 24px;
position: absolute;
right: 5px;
top: 5px;
width: 24px;
}
</style>
Bước 4: Nội dung HTML
<div>
<div id="myfileupload">
<input type="file" id="uploadfile" name="ImageUpload" onchange="readURL(this);" />
<!-- Name mà server request về sẽ là ImageUpload-->
</div>
<div id="thumbbox">
<img height="100" width="100" alt="Thumb image" id="thumbimage" style="display: none" />
<a class="removeimg" href="javascript:" ></a></div>
<div id="boxchoice">
<a href="javascript:" class="Choicefile">Chọn file</a>
<p style="clear:both"></p>
</div>
<label class="filename"></label>
</div>
Sau khi xong 4 bước trên vậy là lúc này các bạn đã có được một công cụ xem ảnh trước khi upload bằng javascript như ý muốn.
Do đây là version đầu tiên nên có thể còn hạn chế các bạn sử dụng và đóng góp thêm ý kiến để mình phát triển thêm.
Mình đã test qua chạy tốt trên trình duyệt IE 7-10 (6 Chưa được test), Firefox, chrome.
Các bạn có thể download code demo tại đây
Cảm ơn các bạn đã xem bài viết !
Vũ Hữu Triệu